Ajax的出現讓Web展示了更新的活力,基本全部的語言,都動態支持Ajax與起服務端進行通訊,並在頁面實現無刷新動態交互。 下面是散仙使用Django+Jquery+Ajax的方式來模擬實現了一個驗證用戶註冊時,用戶名存在不存在的一個小應用。注意,驗證存在不存在使用的是Ajax的方式,不用讓用戶點擊按鈕驗證是否存在。 截圖以下: html
頁面HTML代碼以下:前端
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Ajax驗證測試</title> </head> <script src="/static/jquery/jquery211.js"></script> <script> $(function(){ $("#pu").bind('keydown',function(){ c=$("#pu").val() $.ajax({ type:"POST", url:"/ccc/", data:{name:c}, dataType:"json", success: function(data) { $("#p").text(data.msg) } }); }) }) </script> <body> 輸入名字進行校驗:<input id="pu"type="text"> <span id="p"style="color: red"></span> </body> </html>
view端的代碼,注意csrf的裝飾方法,針對post請求:python
from django.shortcuts import render from django.http.response import HttpResponse # Create your views here. from django.shortcuts import render_to_response #導入render_to_response from django.shortcuts import render_to_response #導入包裝的csrf請求,對跨站攻擊腳本作處理 from django.views.decorators.csrf import csrf_exempt import json def tt(request): return render_to_response('em/add.html') names=list(); names.append("zhangsa") names.append("aa") names.append("b") names.append("c") @csrf_exempt def ccc(request): name=request.POST.get("name",None) rtxt=""; if name is not None: b=name in names if b: #print("名字已經存在!",name) rtxt="名字已經存在!" else: print("名字不存在!") rtxt="名字不存在!" #print("獲取的名字是:NU",name) return HttpResponse(json.dumps({"msg":rtxt}))
urls裏面的代碼:jquery
#ajax校驗 url(r'^ccc/$',ccc),
注意裏面用到了json.dumps函數來生成json對象,注意詞典的形式,在測試以前,最後,先訪問一下看看,json數據是否能拿到.ajax
ajax驗證沒有問題以後,咱們就能夠在前端進行了,測試效果就是散仙開頭所截圖,本文的重點在於驗證ajax的功能調用,因此並無直接從數據庫裏面獲取數據進行驗證,而是使用了list集合,進行了數據的模擬,若是想作的更完美一點,能夠把數據庫部分實現,這樣就與真實中的網站驗證場景就同樣了。數據庫