参考博客：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 的使用，自己学习的心得，希望能帮到更多的小伙伴。

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

  1. django-simple-captcha 验证码插件介绍 django-simple-captcha 使用 以及添加动态ajax刷新验证

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

  2. Django Simple Captcha插件

    正文开始 先看官方描述 1.安装 打开控制台,输入如下: pip install django-simple-captcha 2.把APP添加到Django项目进入自己的Django项目,在setti ...

  3. Django Simple Captcha的使用

    Django Simple Captcha的使用 1.下载Django Simple Captcha django-simple-captcha官方文档地址 http://django-simple- ...

  4. windows及linux下安装django simple captcha 遇到的各种问题及解决的方法

    转载自http://www.cnblogs.com/descusr/p/3225874.html 全部程序写完之后,验证码图片不显示,点击图片地址会提演示样例如以下错误,而且在linux下的纠正办法 ...

  5. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  6. MFC如何在树形图边上添加动态小地图

    MFC如何在树形图边上添加动态小地图 https://www.jianshu.com/p/7b1d828bf5db (简书无法识别缩进的...早知道先在博客园发了) (转载请注明出处) 作者:梦镜谷雨 ...

  7. springboot+shiro+redis(单机redis版)整合教程-续(添加动态角色权限控制)

    相关教程: 1. springboot+shiro整合教程 2. springboot+shiro+redis(单机redis版)整合教程 3. springboot+shiro+redis(集群re ...

  8. QT中添加 动态库(.so) 和 静态库 (.a) 的方法

    在QT 的Makefile文件中: 1 添加动态库,如lipcap.so 则,在LIBS一行中添加“-L/usr/local/lib -lpcap”,依据自己的情况修改libpcap.so的路径 2 ...

  9. vue微信分享链接添加动态参数

    微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save ...

随机推荐

  1. 使用ADO如何获得SQLSERVER 2K的数据库名的列表

    打开数据库连接_ConnectionPtr m_pConn;_RecordsetPtr m_pRs;m_pConn.CreateInstance(__uuidof(Connection));m_pRs ...

  2. sqlalchemy笔记

    http://jzqt.github.io/2015/12/29/SQLAlchemy%E7%AC%94%E8%AE%B0/ 用SQLAlchemy做ORM也有一段时间了,总结一下用过的一些地方. 连 ...

  3. 原！！关于java 单元测试Junit4和Mock的一些总结

    最近项目有在写java代码的单元测试,然后在思考一个问题,为什么要写单元测试??单元测试写了有什么用??百度了一圈,如下: 软件质量最简单.最有效的保证: 是目标代码最清晰.最有效的文档: 可以优化目 ...

  4. 兼容获取元素当前样式 currentStyle || getComputedStyle

    function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputed ...

  5. 在VMW里安装Ghost操作系统遇到的问题及解决的办法

    条件:Ghost系列系统镜像文件 遇到的问题:1.导入镜像文件时提示“无法检测此光盘映像中的操作系统”: 2.分区时提示“ezboot kernel not found” 解决办法:1.直接先创建一个 ...

  6. 10.Query an Array-官方文档摘录

    1.插入 db.inventory.insertMany([ { item: "journal", qty: 25, tags: ["blank", " ...

  7. cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第三步---编辑器(2)---更方便很多其它操作更像编辑器

    /* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏,这里用3.0重写并做下笔记 **2.我也问过木头本人啦.他说:随便写,第一别全然照搬代码:第二能够说 ...

  8. java线程小结1

    1.创建线程的两种方法 新线程的创建和启动都是通过java代码触发的.除了第一个线程(也就是启动程序的.运行main()方法的线程)是由java平台直接创建的之外,其余的线程都是在java代码中通过“ ...

  9. Python 优雅的操作字典

    Python 中的字典是Python中一个键值映射的数据结构,下面介绍一下如何优雅的操作字典. 来源:https://www.linuxzen.com/python-you-ya-de-cao-zuo ...

  10. 官方微信接口（全接口） - 微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI

    微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.微信支付.微信红包.微信卡券.微信小店. 微信开发探讨群 330393916 <?php /**  * Description o ...