AJAX簡介：
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML,現在更多使用json數據）。
AJAX 不是新的編程語言，而是一種使用現有標准的新方法。
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。
a.同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
b.異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。
AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；
AJAX請求‘Content-Type'三種類型：
前端js進行http請求和后端代碼進行數據傳輸的消息格式：
&連接的賦值序列：'Content-Type':'application/x-www-form-urlencoded'(默認)
片段數據:'Content-Type':'multipart/form-data'（上傳文件使用，同時請求方式為post，django自動識別解析，文件為request.FILES）
json字符串:'Content-Type':'application/json'(請求數據為json字符串時需要指定,django不能自動識別，需要對request.body進行手動解析操作)
AJAX的簡單使用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> 6 <title>login</title> 7 </head> 8 <body> 9 <div> 10 用戶名：<input type="text" name="username" id="username"> 11 密碼：<input type="password" name="password" id="password"> 12 <input type="button" id="submit" value="提交">{% csrf_token %} 13 <span id="status"></span> 14 </div> 15 </body> 16 <script> 17 //以post方式請求(csrf) 18 $(function () { 19 $('#submit').click(function () { 20 $.ajax({ 21 url: "{% url 'auth' %}",//請求路徑 22 type: 'post', //請求方式 23 data: { //請求數據(post請求的csrf認證鍵值對固定) 24 username: $('#username').val(), 25 password: $('#password').val(), 26 csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), 27 }, 28 success: function (response) {//請求回調函數 29 if (response == 1) { 30 location.href = "{% url 'index' %}" 31 } else { 32 $('#status').text('賬號或密碼有誤！') 33 } 34 } 35 }) 36 }) 37 }) 38 39 //以get方式請求 40 $(function () { 41 $('#submit').click(function () { 42 $.ajax({ 43 url:"{% url 'auth' %}", 44 type:'get', 45 data:{ 46 username: $('#username').val(), 47 password: $('#password').val(), 48 }, 49 success:function (response) { 50 if(response==1){ 51 location.href="{% url 'index' %}" 52 }else{ 53 $('#status').text('賬號或密碼有誤！') 54 } 55 } 56 }) 57 }) 58 }) 59 </script> 60 61 </html>
urls.py
1 urlpatterns = [ 2 url(r'^login/',views.login,name='login'), 3 url(r'^auth/',views.auth,name='auth'), 4 url(r'^index/',views.index,name='index'), 5 ]
views.py
1 def login(request): 2 if request.method == 'GET': 3 return render(request, 'login.html') 4 #ajax請求的處理視圖函數 5 def auth(request): 6 #POST請求 7 if request.method == 'POST': 8 name = request.POST.get('username') 9 psd = request.POST.get('password') 10 print(name, psd, type(name), type(psd)) 11 if name == "yang" and psd == '123': 12 status = 1 13 else: 14 status = 0 15 return HttpResponse(status) 16 #GET請求 17 if request.method == 'GET': 18 if request.GET.get('username') == 'yang' and request.GET.get('password') == '123': 19 status = 1 20 else: 21 status = 0 22 return HttpResponse(status) 23 24 def index(request): 25 return render(request, 'index.html')
AJAX請求CSRF認證cookie處理：
<script src="{% static 'js/jquery.cookie.js' %}"></script>
<script>
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 從Cookie取csrftoken，並設置到請求頭中
data: {"username": "chao", "password": 123456},
success: function (data) {
console.log(data);
}
})
</script>