django-simple-captcha 验证码插件介绍 django-simple-captcha 使用 以及添加动态ajax刷新验证
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刷新验证的更多相关文章
- Django框架10 /sweetalert插件、django事务和锁、中间件、django请求生命周期
Django框架10 /sweetalert插件.django事务和锁.中间件.django请求生命周期 目录 Django框架10 /sweetalert插件.django事务和锁.中间件.djan ...
- Django学习系列之captcha 验证码插件
安装部署 安装captcha pip3. install django-simple-captcha== settings.py中引入captcha INSTALLED_APPS = [ 'djang ...
- python web框架 Django的APP以及目录介绍 django 1.11版本
如果有很多业务请求函数 应该放在app目录 很多业务放在主站上 当用户一点跳到分站 例如 一个项目叫运维平台 他的业务 有资产管理 私有云 监控 不同业务线 chouti项目 - chouti - ...
- 获取验证码随机字符串@return string $captcha，随机验证码文字
<?php//验证码工具类class Captcha{//属性private $width;private $height;private $fontsize;private $pixes;pr ...
- django入门6引入验证码插件 django-simple-captcha
Django的验证码插件 https://github.com/mbi/django-simple-captcha 安装 (mxonline) C:\Users\ws>pip install ...
- Django中Celery的实现介绍（一）
Django中Celery的实现 Celery官网http://www.celeryproject.org/ 学习资料:http://docs.jinkan.org/docs/celery/ Cele ...
- Django之Form字段插件
一.Django内置Form组件: 在使用Django内置的Form组件时,里面包含了许多[字段]和[插件],也就是验证用户输入的请求以及生成显示在前端的HTML.下面介绍一下用法: F ...
- Django中图形验证码(django-simple-captcha)
django-simple-captcha 在网站开发的登录页面中,经常会需要使用到图形验证码来验证.在Django中,django-simple-captcha库包提供了图形验证码的使用. 下面我们 ...
- Django框架使用一 基本介绍,安装和建项篇
Django概述 Django 是在快节奏的编辑环境中开发的,设计使得常见 Web 开发任务快速且容易;它可以编写一个数据驱动的Web应用程序,简单的说就是不需要开发者操作数据库. 设计数据模型 尽管 ...
随机推荐
- [BeiJing wc2012]冻结 题解
HYSBZ - 2662 这个题如果我们先想用平常的方法来建图,因为我们无法确定是否使用卡片,如果我们每个点每个边都建图,那么非常耗时占空间:注意到k是比较小的,所以我们可以把k拆开,把一个点分为k个 ...
- linux内核中的IPIs是什么?
答: 处理器间中断(Interprocessor Interrupts)
- Vue脚手架创建项目
创建一个基于webpack模板的新项目 D:\Git $ vue -V D:\Git $ vue init webpack my-project ? Project name my-project ? ...
- 0-1背包dp|波动数列|2014年蓝桥杯A组10-fishers
标题:波动数列 观察这个数列: 1 3 0 2 -1 1 -2 ... 这个数列中后一项总是比前一项增加2或者减少3. 栋栋对这种数列很好奇,他想知道长度为 n 和为 s 而且后一项总是比前一项增加a ...
- HihoCoder 1636 Pangu and Stones（区间DP）题解
题意:合并石子,每次只能合并l~r堆成1堆,代价是新石堆石子个数,问最后能不能合成1堆,不能输出0,能输出最小代价 思路:dp[l][r][t]表示把l到r的石堆合并成t需要的最小代价. 当t == ...
- 如何自己烧制全文RSS（打造自己RSS源）
烧制RSS源 到Feed43注册一个账号,虽说不注册也能用,但是为了方便修改自己烧制的RSS,最好还是注册一个账号来管理 到主页点击Create new feed 输入网址点击reload 可以看到请 ...
- js归并排序
js归并排序 function mergeSort (arr){ if (arr.length < 2){ //控制语句,结束递归 return arr; } var middle = Math ...
- Read.csv: some rows are missing
read.csv in R doesn't import all rows from csv file The OP indicates that the problem is caused by q ...
- SpringBatch是什么?
https://segmentfault.com/a/1190000016278038 <dependency> <groupId>org.springframework.bo ...
- Images之Dockerfile中的命令2
COPY COPY has two forms: COPY [--chown=<user>:<group>] <src>... <dest> COPY ...