Django 之Ajax
阿新 • • 發佈：2018-01-30
.py sed token sta get ide 客戶端 send b- 
介紹
Ajax
Ajax（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
- 同步交互：客戶端發出一個請求後，需要等待服務器響應結束後，才能發出第二個請求；
- 異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就可以發出第二個請求。
Ajax除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）。因此使用ajax的主要特點有如下幾點：（1）Ajax使用Javascript技術向服務器發送異步請求；（2）Ajax無須刷新整個頁面；（3）因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以Ajax性能高。在django入門項目中我們已經簡單的介紹了一下ajax應用。下面我們將做詳細介紹。
Ajax的優缺點
優點：
Ajax使用JavaScript技術向服務器發送異步請求;
Ajax無須刷新整個頁面，提高用戶的體驗度
因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以Ajax性能高
關於AJAX的例子
ajax實現方式（無參數）
具體實現方式實例如下（完成一次ajax請求，且完成了一個局部刷新）：
html文件部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="/static/js/jquery-3.2.1.min.js"></script> </head> <body> <h3>INDEX</h3> <button class="s1">send_ajax</button> <p class="name"></p> <script> // ajax的無參請求 $(".s1").click(function () { // 觸發ajax事件 $.ajax({ url: "/ajax_handle/", type: "get", success: function (data) { {# data相當於服務端拿過來的"黎詩"的數據 #} {# 當某一個事件完成之後，固定執行另外一個函數 #} {# 在這裏success也相當於一個回調函數， 當我們請求過去，到達服務器，
服務器響應過來return HttpResponse("黎詩")，這裏success開始工作 ，把數據響應到客戶端 這樣就是完整的過程 #} console.log(data); {# 完成一次ajax請求，且完成了一個局部刷新#} $(".name").html(data) {# 把一個data字符串賦到一個文本上 #} } }) }); </script> </body> </html>
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
return render(request,"index.html")
def ajax_handle(request):
return HttpResponse("黎詩")
Views.py
url(r‘^index/‘, views.index), # index(request) 必須需傳一個參數
url(r‘^ajax_handle/‘, views.ajax_handle), # index(request)
urls。py
關於AJAX的有參操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="/static/js/jquery-3.2.1.min.js"></script> </head> <body> <input type="text" id="n1">+<input type="text" id="n2">=<input type="text" id="sum"> {#為什麽不需要name標簽：form表單的作用，點submit的按鈕,自動綁定事件，以name,ajax,是我們直接拼鍵值對了，我們寫的是什麽，他就是什麽#} <button class="count">計算</button> <script> // ajax的有參請求 //綁定點擊事件 $(".count").click(function () { //觸發ajax請求 $.ajax({ url:"/count/", {# data-->指定你要放的參數#} data:{"num1":$("#n1").val(),"num2":$("#n2").val()}, {# 這裏寫的都是JavaScript代碼,與Python無關，不是字典,是基於js的數據類型，obj類型#} {# 這裏加鍵值對#} success:function (data) { console.log(data); $("#sum").val(data) } }) }) </script> </body> </html>
def count(request):
num1 = request.GET.get("num1")
num2 = request.GET.get("num2")
ret = int(num1)+int(num2)
return HttpResponse(str(ret))
邏輯處理views.py
註意點
data裏面的類型須是符合序列化字符串
校驗用戶註冊信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="/static/js/jquery-3.2.1.min.js"></script> </head> <body> {% csrf_token %} <h4>校驗用戶是否存在</h4> <input type="text" id="user"><span></span> <script> //校驗註冊信息 $("#user").blur(function () { $.ajax({ url: "/jiaoyan_user/", type: "post", data: { "user": $("#user").val(), "csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val()}, success: function (data) { console.log(data); var data = JSON.parse(data); {# 反序列化為字典#} if (data.is_reg) { $("#user").next().html("該用戶已註冊").css("color","red"); {# 當註冊，添加錯誤信息，#} } } }) }) </script> </body> </html>
def jiaoyan_user(request):
response={"is_reg":True}
user=request.POST.get("user")
# == 表示在數據庫裏有
if user == "jassin":
pass
else:
response["is_reg"] = False
import json
# 返回到頁面，要序列化成字符串
return HttpResponse(json.dumps(response))
Views.py
url(r‘^jiaoyan_user/‘, views.jiaoyan_user), # index(request)urls.py
註意點
關於csrf錯誤
Django 之Ajax