Django1.7+JQuery+Ajax集成小例子

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集合,進行了數據的模擬,若是想作的更完美一點,能夠把數據庫部分實現,這樣就與真實中的網站驗證場景就同樣了。數據庫

相關文章
相關標籤/搜索