快捷導(dǎo)航

Django1.7+JQuery+Ajax驗(yàn)證用戶注冊(cè)集成小例子

更新時(shí)間：2017年04月08日 22:23:23 投稿：mdxy-dxy

下面是散仙使用Django+Jquery+Ajax的方式來(lái)模擬實(shí)現(xiàn)了一個(gè)驗(yàn)證用戶注冊(cè)時(shí)，用戶名存在不存在的一個(gè)小應(yīng)用。注意，驗(yàn)證存在不存在使用的是Ajax的方式，不用讓用戶點(diǎn)擊按鈕驗(yàn)證是否存在,需要的朋友可以參考下

Ajax的出現(xiàn)讓W(xué)eb展現(xiàn)了更新的活力，基本所有的語(yǔ)言，都動(dòng)態(tài)支持Ajax與起服務(wù)端進(jìn)行通信，并在頁(yè)面實(shí)現(xiàn)無(wú)刷新動(dòng)態(tài)交互。下面是散仙使用Django+Jquery+Ajax的方式來(lái)模擬實(shí)現(xiàn)了一個(gè)驗(yàn)證用戶注冊(cè)時(shí)，用戶名存在不存在的一個(gè)小應(yīng)用。注意，驗(yàn)證存在不存在使用的是Ajax的方式，不用讓用戶點(diǎn)擊按鈕驗(yàn)證是否存在。截圖如下：

頁(yè)面HTML代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
<title>Ajax驗(yàn)證測(cè)試</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> 
輸入名字進(jìn)行校驗(yàn)：<input id="pu"type="text"> <span id="p"style="color: red"></span>
</body>
</html>

view端的代碼，注意csrf的裝飾方法，針對(duì)post請(qǐng)求：

from django.shortcuts import render
from django.http.response import HttpResponse
# Create your views here.
from django.shortcuts import render_to_response
#導(dǎo)入render_to_response
from django.shortcuts import render_to_response
#導(dǎo)入包裝的csrf請(qǐng)求，對(duì)跨站攻擊腳本做處理
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("名字已經(jīng)存在！",name)
rtxt="名字已經(jīng)存在！"
else:
print("名字不存在!")
rtxt="名字不存在!"
 #print("獲取的名字是:NU",name)
 
 return HttpResponse(json.dumps({"msg":rtxt}))

urls里面的代碼：

#ajax校驗(yàn)
url(r'^ccc/$',ccc),

注意里面用到了json.dumps函數(shù)來(lái)生成json對(duì)象，注意詞典的形式，在測(cè)試之前，最后，先訪問一下看看，json數(shù)據(jù)是否能拿到.

ajax驗(yàn)證沒有問題之后，我們就可以在前端進(jìn)行了，測(cè)試效果就是散仙開頭所截圖，本文的重點(diǎn)在于驗(yàn)證ajax的功能調(diào)用，所以并沒有直接從數(shù)據(jù)庫(kù)里面獲取數(shù)據(jù)進(jìn)行驗(yàn)證，而是使用了list集合，進(jìn)行了數(shù)據(jù)的模擬，如果想做的更完美一點(diǎn)，可以把數(shù)據(jù)庫(kù)部分實(shí)現(xiàn)，這樣就與真實(shí)中的網(wǎng)站驗(yàn)證場(chǎng)景就一樣了。

您可能感興趣的文章: