參考博客：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 的使用，自己學習的心得，希望能幫到更多的小伙伴。