Python——Django框架——django-simple-captcha（驗證碼）

1、引用 包

pip install django-simple-captcha

2、將captcha加入setting的 INSTALLED_APPS

3、運行python manager.py migrations 和 python manage.py migrate

4、加入路徑

path('captcha/',include('captcha.urls))

5、引入Form表單

from captcha.fields import CaptchaFieldclass captcha = CaptcchaField()#生成圖片驗證碼和輸入框

6、ajax動態驗證

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)

view.py

path(r'^ajax_val/',views.ajax_val, name='ajax_val'), #動態驗證的路由

<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="https://code.jquery.com/jquery-3.3.1.min.js"></script>

tempalte

7、ajax刷新

path(r’refresh/$’, views.captcha_refresh, name=’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')

view.py

 $(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刷新

 

 

 

| |