django-simple-captcha作为一款django的验证码插件,使用方法非常简单,能够快速应用到web应用中。
文档官网地址:django-simple-captcha

参考博客:http://blog.csdn.net/tanzuozhev/article/details/50458688?locationNum=2&fps=1

参考博客:http://blog.csdn.net/shanliangliuxing/article/details/9214181


django-simple-captcha是django的验证码包,非常简单实用,这次记录的是如何点击验证码后刷新验证码,因为这个功能官方文档并没有详细给出。

django-simple-captcha官方文档:http://django-simple-captcha.readthedocs.io/en/latest/

django-simple-captcha的github网址:https://github.com/mbi/django-simple-captcha


1.安装 pip install django-simple-captcha, pip install Pillow

2.将captcha 加入 settings.py 的 INSTALLED_APPS

3.运行 python manager.py migrations 和 python manage.py migrate,以前的版本需要用到 python manage.py syncdb

4.url路由加入urls.py的urlpatterns

urlpatterns = [
url(r'^captcha/', include('captcha.urls')), # 这是生成验证码的图片
url('^some_view/', finder.views.some_view), # finder是我的app名字,需要在文件头部加入 import finder.views
]

5.在forms.py中加入

from django import forms
from captcha.fields import CaptchaFieldclass
class CaptchaTestForm(forms.Form):
title = forms.CharField(max_length=100, label='title')
price = forms.FloatField(max_value=100, label='price') # 这里是我们需要的字段,以title和price为例
captcha = CaptchaField() # 为生成的验证码图片,以及输入框

6.在views.py中加入以下代码

def some_view(request):
if request.POST:
form = CaptchaTestForm(request.POST)
# Validate the form: the captcha field will automatically
# check the input
if form.is_valid():
human = True
return HttpResponse(form.cleaned_data) # 这里没有建立模型,如果成功则直接打印
else:
return HttpResponse('validate error')
else:
form = CaptchaTestForm()
return render_to_response('template.html',locals()) # Python 的内建函数 locals() 。它返回的字典对所有局部变量的名称与值进行映射

7.template.html 的内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<form action="." method="POST">
{% csrf_token %} {{ form }}
<input type="submit" value="submit" />
</form>
</body>
</html>

8.到此打开 http://localhost:8000/some_view/ 就有有一个含有验证码的title,price的表单

这里我们简单说一下验证码生成的原理,django-simple-captcha并没有使用session对验证码进行存储,而是使用了数据库,首先生成一个表 captcha_captchastore ,包含以下字段

challenge = models.CharField(blank=False, max_length=32) # 验证码大写或者数学计算比如 1+1
response = models.CharField(blank=False, max_length=32) # 需要输入的验证码 验证码小写或数学计算的结果 比如 2
hashkey = models.CharField(blank=False, max_length=40, unique=True) # hash值
expiration = models.DateTimeField(blank=False) # 到期时间

9.打开http://localhost:8000/some_view/ 会发现有一个隐藏字段

这个隐藏字段就是hashkey的值,django将hashkey传给页面以hidden的形式存在,提交表单时 hashkey与 输入的验证码 一起post到服务器,此时服务器验证 captcha_captchastore表中 hashkey 对应的 response 是否与 输入的验证码一致,如果一致则正确,不一致返回错误。


10.django-simple-captcha ajax动态验证

了解了验证码生成的原理,我们能就可以用ajax进行动态验证

将以下代码写入 views.py:

from django.http import JsonResponse
from captcha.models import CaptchaStore def ajax_val(request):
if request.is_ajax():
cs = CaptchaStore.objects.filter(response=request.GET['response'], hashkey=request.GET['hashkey'])
if cs:
json_data={'status':1}
else:
json_data = {'status':0}
return JsonResponse(json_data)
else:
# raise Http404
json_data = {'status':0}
return JsonResponse(json_data)

11.写入 urls.py, 为上面的view设置路由

urlpatterns = [
url(r'^captcha/', include('captcha.urls')) # 这是生成验证码的图片
url('^some_view/', finder.views.some_view), # finder是我的app名字,需要在文件头部加入 import finder.views
url('^ajax_val/', finder.views.ajax_val, name='ajax_val'), # 新加入
]

12.tempalte.html 写入ajax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<form action="." method="POST">
{% csrf_token %} {{ form }}
<input type="submit" value="submit" />
</form>
<script>
$(function(){
$('#id_captcha_1').blur(function(){
// #id_captcha_1为输入框的id,当该输入框失去焦点是触发函数
json_data={
'response':$('#id_captcha_1').val(), // 获取输入框和隐藏字段id_captcha_0的数值
'hashkey':$('#id_captcha_0').val()
}
$.getJSON('/ajax_val', json_data, function(data){
//ajax发送
$('#captcha_status').remove()
if(data['status']){ //status返回1为验证码正确, status返回0为验证码错误, 在输入框的后面写入提示信息
$('#id_captcha_1').after('<span id="captcha_status" >*验证码正确</span>')
}else{
$('#id_captcha_1').after('<span id="captcha_status" >*验证码错误</span>')
}
});
});
})
</script>
<script src="./jquery.js"></script> 记得导入jquery.js
</body>
</html>

至此我们完成了django-simple-captcha 的ajax动态验证


13.django-simple-captcha ajax刷新

如果当前验证码看不清,我们可以刷新一下,这个我们用ajax来做。 jango-simple-captcha本身提供了一个刷新页面,/refresh 在captcha/urls.py中:

url(r’refresh/$’, views.captcha_refresh, name=’captcha-refresh’)

这里在我们自己的urls.py中可以不做处理,直接使用 /captcha/refresh/

14.views.captcha_refresh 源码

# 只是源码介绍不用写入自己的代码中
def captcha_refresh(request):
""" Return json with new captcha for ajax refresh request """
if not request.is_ajax():
# 只接受ajax提交
raise Http404
new_key = CaptchaStore.generate_key()
to_json_response = {
'key': new_key,
'image_url': captcha_image_url(new_key),
}
return HttpResponse(json.dumps(to_json_response), content_type='application/json')

15.通过阅读源代码我们发现, views.captcha_refresh 只接受ajax提交,最后返回 key 和 image_url 的json数据,这里的key就是 hashkey, 需要我们写入id为id_captcha_1的隐藏字段, image_url为验证码图片的新url,这里我们加入ajax刷新,点击验证码图片即可实现刷新,最新的tempalte.html 代码为

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<form action="." method="POST">
{% csrf_token %} {{ form }}
<input type="submit" value="submit" />
</form>
<script>
$(function(){
$('.captcha').css({
'cursor': 'pointer'
})
# ajax 刷新
$('.captcha').click(function(){
console.log('click');
$.getJSON("/captcha/refresh/",
function(result){
$('.captcha').attr('src', result['image_url']);
$('#id_captcha_0').val(result['key'])
});});
# ajax动态验证
$('#id_captcha_1').blur(function(){
// #id_captcha_1为输入框的id,当该输入框失去焦点是触发函数
json_data={
'response':$('#id_captcha_1').val(), // 获取输入框和隐藏字段id_captcha_0的数值
'hashkey':$('#id_captcha_0').val()
}
$.getJSON('/ajax_val', json_data, function(data){ //ajax发送 $('#captcha_status').remove()
if(data['status']){ //status返回1为验证码正确, status返回0为验证码错误, 在输入框的后面写入提示信息
$('#id_captcha_1').after('<span id="captcha_status" >*验证码正确</span>')
}else{
$('#id_captcha_1').after('<span id="captcha_status" >*验证码错误</span>')
}
});
});
})
</script>
<script src="./jquery.js"></script> 记得导入jquery.js
</body>
</html>

ok, 现在我们已经完成了对django-simple-captcha 的使用,自己学习的心得,希望能帮到更多的小伙伴。

作者:WangC.W
出处:  https://www.cnblogs.com/wangchaowei/p/6748447.html

django-simple-captcha 验证码插件介绍 django-simple-captcha 使用 以及添加动态ajax刷新验证的更多相关文章

  1. Django框架10 /sweetalert插件、django事务和锁、中间件、django请求生命周期

    Django框架10 /sweetalert插件.django事务和锁.中间件.django请求生命周期 目录 Django框架10 /sweetalert插件.django事务和锁.中间件.djan ...

  2. Django学习系列之captcha 验证码插件

    安装部署 安装captcha pip3. install django-simple-captcha== settings.py中引入captcha INSTALLED_APPS = [ 'djang ...

  3. python web框架 Django的APP以及目录介绍 django 1.11版本

    如果有很多业务请求函数 应该放在app目录 很多业务放在主站上 当用户一点跳到分站 例如 一个项目叫运维平台  他的业务 有资产管理 私有云 监控 不同业务线 chouti项目 - chouti - ...

  4. 获取验证码随机字符串@return string $captcha,随机验证码文字

    <?php//验证码工具类class Captcha{//属性private $width;private $height;private $fontsize;private $pixes;pr ...

  5. django入门6引入验证码插件 django-simple-captcha

    Django的验证码插件 https://github.com/mbi/django-simple-captcha 安装 (mxonline) C:\Users\ws>pip install  ...

  6. Django中Celery的实现介绍(一)

    Django中Celery的实现 Celery官网http://www.celeryproject.org/ 学习资料:http://docs.jinkan.org/docs/celery/ Cele ...

  7. Django之Form字段插件

    一.Django内置Form组件:        在使用Django内置的Form组件时,里面包含了许多[字段]和[插件],也就是验证用户输入的请求以及生成显示在前端的HTML.下面介绍一下用法: F ...

  8. Django中图形验证码(django-simple-captcha)

    django-simple-captcha 在网站开发的登录页面中,经常会需要使用到图形验证码来验证.在Django中,django-simple-captcha库包提供了图形验证码的使用. 下面我们 ...

  9. Django框架使用一 基本介绍,安装和建项篇

    Django概述 Django 是在快节奏的编辑环境中开发的,设计使得常见 Web 开发任务快速且容易;它可以编写一个数据驱动的Web应用程序,简单的说就是不需要开发者操作数据库. 设计数据模型 尽管 ...

随机推荐

  1. 简单的windows窗口创建实例

    #include<windows.h> #include<tchar.h> LRESULT CALLBACK WndProc(HWND hwnd,UINT umsg,WPARA ...

  2. you must restart adb and eclipse的相关解决办法

    问题是5037端口被占用: C:\>netstat -aon|findstr "5037" 看到了吗,端口被进程号为5037的进程占用,继续执行下面命令(也可以去任务管理器中 ...

  3. Arrays的排序算法sort及方法使用

    Java工具包中的Arrays工具类里面有数组的快速排序算法. 源码如下: /** * Sorts the specified range of the array using the given * ...

  4. QML常用控件

    这里的控件是显示的元素 1.Item:一切的基类 Item { Image { source: "tile.png" } Image { x: width: height: sou ...

  5. Android灯光系统框架分析【转】

    本文转载自: 首先别人的APP要能直接访问到你写的硬件或者不经过任何修改的APP能直接使用你的驱动,就需要使用系统自带的JNI,所以我们需要写出符合系统自带JNI文件的HAL文件和驱动程序,下面具体分 ...

  6. 内核中的xenfs是什么?

    答: 是一个xen虚拟机高性能搜索文件系统,它基于共享内存通信协议和共享缓冲区缓存.

  7. oracle 之 安装后pl/sql登录报ora-12154

    这个问题一开始困扰了很久. 查的资料是复制一小段代码到tnsnames.ora中 SID名 = (DESCRIPTION =    (ADDRESS = (PROTOCOL = TCP)(HOST = ...

  8. 论文阅读:Prominent Object Detection and Recognition: A Saliency-based Pipeline

    论文阅读:Prominent Object Detection and Recognition: A Saliency-based Pipeline  如上图所示,本文旨在解决一个问题:给定一张图像, ...

  9. 在Vue的构造器里我们写一个add方法,然后我们用实例的方法调用它

    html <div id="app"> <div>{{message}}</div> </div> js var vm = new ...

  10. Unity3D学习笔记(二十六):MVC框架下的背包系统(1)

    MVC背包 需求: 1.背包格子的装备是可以拖动的 2.装备栏的装备也是可以拖动的 3.当背包格子的装备拖动到装备栏时,如果是装备类型和装备栏类型是一致的能装上 4.背包的装备是按照顺序放在格子中的, ...