ajax知識點介紹：
異步Javascript和XML，用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML），也有可能是json
優點：
1. AJAX使用Javascript技術向服務器發送異步請求；
2. AJAX無須刷新整個頁面；
3. 因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以AJAX性能高；
$.ajax參數
1 ######################------------data---------################ 2 3 data: 當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式 4 (urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。 5 6 function testData() { 7 $.ajax("/test",{ //此時的data是一個json形式的對象 8 data:{ 9 a:1, 10 b:2 11 } 12 }); //?a=1&b=2 13 ######################------------processData---------################ 14 15 processData：聲明當前的data數據是否進行轉碼或預處理，默認為true，即預處理；if為false， 16 那么對data：{a:1,b:2}會調用json對象的toString()方法，即{a:1,b:2}.toString() 17 ,最后得到一個［object，Object］形式的結果。 18 19 ######################------------contentType---------################ 20 21 contentType：默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。 22 用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交數據， 23 比如contentType:"application/json"，即向服務器發送一個json字符串： 24 $.ajax("/ajax_get",{ 25 26 data:JSON.stringify({ 27 a:22, 28 b:33 29 }), 30 contentType:"application/json", 31 type:"POST", 32 33 }); //{a: 22, b: 33} 34 35 注意：contentType:"application/json"一旦設定，data必須是json字符串，不能是json對象 36 37 views.py: json.loads(request.body.decode("utf8")) 38 39 40 ######################------------traditional---------################ 41 42 traditional：一般是我們的data數據有數組時會用到 ：data:{a:22,b:33,c:["x","y"]}, 43 traditional為false會對數據進行深層次迭代；
csrf跨站請求偽造三種
1 第一種 2 同一個xml里面，不需要寫csrf_token 3 $.ajaxSetup({ 4 data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, 5 }); 6 7 第二種 8 需要寫csrf_token 9 <form> 10 {% csrf_token %} 11 </form><br><br><br>$.ajax({<br>...<br>data:{ 12 13 提交時候 ajax data里面的鍵值對 14 "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(); 15 16 第三種 17 需引用jquery.cookie.js 18 <script src="{% static 'js/jquery.cookie.js' %}"></script> 19 $.ajax({ 20 headers:{"X-CSRFToken":$.cookie('csrftoken')}, 21 })
登陸注冊實例
創建django app01項目
無數據庫models
1. urls
1 urlpatterns = [ 2 url(r'^admin/', admin.site.urls), 3 url(r'^login/', views.login), 4 url(r'^reg/', views.reg), 5 ]
2. views
1 from django.shortcuts import render,HttpResponse 2 3 # Create your views here. 4 5 6 def login(request): 7 if request.is_ajax(): # 判斷是不是ajax提交的數據 8 print(request.body) # b'{"user":"alex","pwd":"123"}' 9 # b'user=alex&pwd=123&csrfmiddlewaretoken=PCLE4jNWOmLcmd5LiY1qrwTWQZLpZdSktwwwPswNKg7DhblKO6X1fBDkB05yoNMm' 10 print(request.POST) # {'user': ['alex'], 'pwd': ['123'], 'csrfmiddlewaretoken': ['PCLE4jNWOmLcmd5LiY1qrwTWQZLpZdSktwwwPswNKg7DhblKO6X1fBDkB05yoNMm']} 11 print(request.GET) # {} 12 13 # user=request.POST.get("user") 14 # pwd=request.POST.get("pwd") 15 16 # import json 17 # s=request.body.decode("utf8") 18 # d=json.loads(s) 19 # print(d.get("user")) 20 # print(d.get("pwd")) 21 return HttpResponse("OK") 22 23 return render(request,"index.html") 24 25 26 27 def reg(request): 28 if request.is_ajax(): 29 print(request.POST,"=======") 30 31 return HttpResponse("OK") 32 33 return render(request,"reg.html")
3. index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 7 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> 8 </head> 9 <body> 10 11 {##} 12 {#<form action="">#} 13 {# 自動生成一個input標簽#} 14 {# {% csrf_token %}#} 15 {# <p>姓名：<input type="text" id="user"></p>#} 16 {# <p>密碼：<input type="password" id="pwd"></p>#} 17 {# <input type="button" value="submit" id="button">#} 18 {#</form>#} 19 20 <button class="send_Ajax">send_Ajax</button> 21 22 23 24 {#<script>#} 25 {# $(":button").click(function () {#} 26 {# 第一種方式，表單里面不需要寫{% csrf_token %}#} 27 {# $.ajaxSetup({#} 28 {# data: {csrfmiddlewaretoken: '{{ csrf_token }}'}#} 29 {# });#} 30 {##} 31 {# $.ajax({#} 32 {# url:"/login/",#} 33 {# type:"POST",#} 34 {# data:JSON.stringify({ 傳送到前端的是json對象#} 35 {# user:$("#user").val(),#} 36 {# pwd:$("#pwd").val(),#} 37 # 預期服務器返回的數據類型，ajax會根據服務器返回的content Type來進行轉換，沒有這行也可以，相當於下面的contentType 38 {# dataType:"json",} 39 {# 第二種方式#} 40 {# csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()#} 41 {# }), // 'user=alex&pwd=123'#} 42 {# //contentType:"application/x-www-form-urlencoded", // (默認)#} 43 {# 第三種方式，數據都在body里面#} 44 {# headers:{"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},#} 45 {# 同上#} 46 {# headers:{"X-CSRFToken":$.cookie("csrftoken")},#} 47 {# contentType:"application/json", 預期服務器返回的數據類型#} 48 {# success:function (data) {#} 49 {# console.log(data)#} 50 {# }#} 51 {# })#} 52 {# })#} 53 {#</script>#} 54 55 56 <script> 57 $('#butsend_Ajaxon').click(function () { 58 {# $.ajaxSetup({#} 59 {# data:{csrfmiddlewaretoken: '{{ csrf_token }}'}#} 60 {# data:{csrfmiddlewaretoken:'{{ csrf_token }}'}#} 61 {# });#} 62 63 $.ajax({ 64 url:'/login/', 65 type:'POST', 66 date:{ 67 user:'alex', 68 pwd:'123' 69 {# user:$('#user').val(),#} 70 {# pwd:$('#pwd').val()#} 71 }, 72 {# csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#} 73 {# contentType:'application/x-www-form-urlencoded',#} 74 success:function (data) { 75 console.log(data) 76 } 77 }) 78 }) 79 </script> 80 81 </body> 82 </html>
通過注冊頁面來看 jQuery.serialize()
serialize()函數用於序列化一組表單元素，將表單內容編碼為用於提交的字符串。
該函數主要根據用於提交的有效表單控件的name和value，將它們拼接為一個可直接用於表單提交的文本字符串
該函數不會序列化不需要提交的表單控件，這和常規的表單提交行為是一致的。例如：不在<form>標簽內的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。
serialize()函數的返回值為String類型，返回將表單元素編碼后的可用於表單提交的文本字符串。
4. reg.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 7 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> 8 </head> 9 <body> 10 11 12 <form id="myForm" action="/reg/" method="post"> 13 {% csrf_token %} 14 <input name="uid" type="hidden" value="1" /> 15 <input id=user name="username" type="text" value="張三" /> 16 <input name="password" type="text" value="123456" /> 17 <select name="grade" id="grade"> 18 <option value="1">一年級</option> 19 <option value="2">二年級</option> 20 <option value="3" selected="selected">三年級</option> 21 <option value="4">四年級</option> 22 <option value="5">五年級</option> 23 <option value="6">六年級</option> 24 </select> 25 <input name="sex" type="radio" checked="checked" value="1" />男 26 <input name="sex" type="radio" value="0" />女 27 <input name="hobby" type="checkbox" checked="checked" value="1" />游泳 28 <input name="hobby" type="checkbox" checked="checked" value="2" />跑步 29 <input name="hobby" type="checkbox" value="3" />羽毛球 30 <input name="btn" id="btn" type="button" value="點擊" /> 31 32 </form> 33 34 35 <script> 36 $("#btn").click(function () { 37 38 $.ajax({ 39 url:"/reg/", 40 type:"POST", 41 //data:$("#myForm").serialize(), #序列化<form>內的所有表單元素 42 data:$(":checkbox,:radio,#user,[name='csrfmiddlewaretoken']").serialize(), # 直接對部分表單元素進行序列化。 43 success:function (data) { 44 console.log(data) 45 } 46 47 }) 48 49 50 }) 51 </script> 52 <script> 53 {# $(":button").click(function () {#} 54 {##} 55 {# $.ajax({#} 56 {# url:"/login/",#} 57 {# type:"POST",#} 58 {# data:JSON.stringify({#} 59 {# user:$("#user").val(),#} 60 {# pwd:$("#pwd").val()#} 61 {# //csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()#} 62 {# })#} 63 {# , // 'user=alex&pwd=123'#} 64 {# //contentType:"application/x-www-form-urlencoded", // (默認)#} 65 {# //headers:{"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},#} 66 {# headers:{"X-CSRFToken":$.cookie("csrftoken")},#} 67 {# contentType:"application/json",#} 68 {# success:function (data) {#} 69 {# console.log(data)#} 70 {# },#} 71 {##} 72 {# })#} 73 {# })#} 74 </script> 75 </body> 76 </html>