目錄
Ajax簡單介紹
假如用戶輸入的格式不對，那麼我們就應該在模態對話框相應輸入框：提示報錯，
但是，哪怕用戶輸入格式錯了，只要提交，後臺判斷個數錯誤，返回給客戶，但是模態對話框根本就沒有url指向，所以返回給用戶的頁面，模態對話框是隱藏狀態，所以錯誤提示沒辦法顯示在模態對話框。
Ajax就是爲了解決上面的問題的一套工具，可以不刷新頁面情況下悄悄進行提交數據，後臺悄悄的響應數據，然後可以進行數據應用
Ajax(jQuery)
實戰Django之Ajax（jQuery）前後端交互：https://blog.csdn.net/Burgess_zheng/article/details/86548407
-
Ajax請求方式和參數介紹
jQuery.get(...)
所有參數：
url: 待載入頁面的URL地址
data: 待發送 Key/value 參數。
success: 載入成功時回調函數。
dataType: 返回內容格式，xml, json, script, text, html
jQuery.post(...)
所有參數：
url: 待載入頁面的URL地址
data: 待發送 Key/value 參數
success: 載入成功時回調函數
dataType: 返回內容格式，xml, json, script, text, html
jQuery.getJSON(...)
所有參數：
url: 待載入頁面的URL地址
data: 待發送 Key/value 參數。
success: 載入成功時回調函數。
jQuery.getScript(...)
所有參數：
url: 待載入頁面的URL地址
data: 待發送 Key/value 參數。
success: 載入成功時回調函數。jQuery.ajax(...)
部分參數：
url：請求地址
type：請求方式，GET、POST（1.9.0之後用method）
headers：請求頭
data：要發送的數據
contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否異步
timeout：設置請求超時時間（毫秒）
beforeSend：發送請求前執行的函數(全局)
complete：完成之後執行的回調函數(全局)
success：成功之後執行的回調函數(全局)
error：失敗之後執行的回調函數(全局)
accepts：通過請求頭髮送給服務器，告訴服務器當前客戶端課接受的數據類型
dataType：將服務器端返回的數據轉換成指定類型
"xml": 將服務器端返回的內容轉換成xml格式
"text": 將服務器端返回的內容轉換成普通文本格式
"html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，如果包含JavaScript標籤，則會嘗試去執行。
"script": 嘗試將返回值當作JavaScript去執行，然後再將服務器端返回的內容轉換成普通文本格式
"json": 將服務器端返回的內容轉換成相應的JavaScript對象
"jsonp": JSONP 格式(使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數)
如果不指定，jQuery 將自動根據HTTP包MIME信息返回相應類型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a stringconverters： 轉換器，將服務器端的內容根據指定的dataType轉換類型，並傳值給success回調函數
$.ajax({
accepts: {
mycustomtype: 'application/x-some-custom-type'
},
// Expect a `mycustomtype` back from server
dataType: 'mycustomtype'// Instructions for how to deserialize a `mycustomtype`
converters: {
'text mycustomtype': function(result) {
// Do Stuff
return newresult;
}
},
});
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="add_form" method="POST" action="/submit/ajax/"> {% csrf_token %} <a id="csrf" style="display: none">{{ csrf_token }}</a> <input type="text" name="hostname" style="display: block"> <input type="text" name="ip" style="display: block"> <input type="text" name="port" style="display: block"> <input type="text" name="b_id" style="display: block"> <input type="submit" name="submit提交"> <input id="ajax_submit" type="button" value="ajax提交"> <span id="error_msg" style="color: red"></span> </form> <script src="/static/jquery.min.js"></script> <script> $('#ajax_submit').click(function () { $.ajax({ url:"/submit/ajax/", type:'POST', //data:{'user':123,'host_list':{'key':'value','key':'value'}}, //如果data提交的數據的字典裏面的key的value是字典提交會報錯如上： // 需要設置下面的參數： //traditional:true, //data:{'hostname':$('#host').val(), // 'ip':$('#ip').val(), // 'port':$('#port').val(), // 'b_id':$('#sel').val() // }, data:$('#add_form').serialize(), //ajax的data發送數據的時候可以一條命令解決==上面data發送的簡寫 //只要匹配的from標籤. serialize(), 該form標籤的所有name的值都會發送過去 headers:{'X-CSRFtoken':$('#csrf').text()}, dataType:'JSON', //之前我們都需要在succses參數的function內裏寫Json.parse(data)對後端響應的數據字符串反序列化 //如果寫上 dataType:'JSON',自動把接收數據進行反序列化,succses參數的function內就無需進行反序列化 //發送指定接收路徑，請求類型，數據給後臺，然後進入等待狀態 //直到收到後臺的數據才執行下面的函數 success: function(data){ //var data = JSON.parse(data); //JSON.parse（data）:把字符串轉換成（反序列化）對象 //由於我們dataType參數設置了自動反序列化數據這裏就註釋掉 //如a =[1,2,3,4] //JSON.stringigy(a):把對象轉換成（序列化）字符串 if(data.status){ location.reload(); //假如該status(key)的值是true,就爲真，重新刷新頁面 //對象就可以用點.取值 //提交後臺判斷成功之後的一些列操作 }else { //否則在匹配的標籤添加內容 console.log(data); $('#error_msg').text(data.error); } }, error:function () { //出現未知的情況才執行這個函數，succses是隻要發送到後臺就算成功，獲取錯誤信息返回給用戶，成功後的事 } }) }); //簡單的寫法（推薦上面的寫法） //$.get(url="xx",data{},susccess:function(data){if....} // $.post(url="xx",data{},susccess:function(data){if....} // $.getJson(....} </script> </body> </html>
-
ajax提交內添加csrf_token
涉及到csrf跳轉：Django之CSRF XSS原理解析 https://blog.csdn.net/Burgess_zheng/article/details/86548425
方式1(獲取csrf進行請求頭髮送）
<script src="/static/jquery.min.js"></script> <script src="/static/jquery.cookie.js"></script> <script> $('#ajax').click(function(){ $.ajax({ url:'/login/', type:"POST", dataType:'JSON', tradionale:true, headers:{'X-CSRFtoken':$.cookie('csrftoken')}, //請求頭提交csrftoken data:{'user':'root','pwd':'123'}, success:function (obj) { } }) }) }) </script>方式2(前端添加一個自動函數，所有ajax提交之前都會執行該函數先進行提交csrf)
<script src="/static/jquery.min.js"></script> <script src="/static/jquery.cookie.js"></script> <script> $(function(){ function csrfSafeMethod(method){ return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)) } $(function(){ $.ajaxSetup({ beforeSend:function (xhr,settings) { if(!csrfSafeMethod(settings.type) && !this.crossDomain) xhr.setRequestHeader('X-CSRFtoken',$.cookie('csrftoken')) } }) }); //在執行ajax前會先執行$.ajaxSetup函數 //settings該形參是接收ajax提交的時候獲取到該ajax提交所有數據 //獲取了以後進行判斷請求類型是什麼傳參進行判斷 //如果是POST就先在ajax發送前先執行該ajaxSetup $('#ajax').click(function(){ $.ajax({ url:'/login/', type:"POST", dataType:'JSON', tradionale:true, //headers:{'X-CSRFtoken':$.cookie('csrftoken')}, data:{'user':'root','pwd':'123'}, success:function (obj) { } }) }) }) </script>
原生ajax（XMLHttpRequest）
Jquery內部調用的就是XMLHttpRequest發的ajax操作
之前爲什麼推薦jquery用1.x版本的，而不用2.x版本的或者3.x版本的
因爲XMLHttpRequest是瀏覽器的一個對象，不是在所有的瀏覽器上都有的
如微軟系列有另外一個替代XMLHttpRequest，所以像IE6.7.8版本的瀏覽器就沒有這麼一個對象.
Jquery會1.X版本你$.ajax會自動識別瀏覽器如果有XMLHttpRequest創建，如果沒有就自動調用另外一個來替代，2.x 3.x版本就放棄了low版本只支持XMLHttpRequest
我們只學一個XMLHttpRequest是不行的
-
XMLHttpRequestajax請求方式和參數介紹
#python創建對象
b = 類()#jquery創建對象
b = new XMLHttpRequest()#XmlHttpRequest對象的主要方法：
a. void open(String method,String url,Boolen async)
用於創建請求
參數：
method： 請求方式（字符串類型），如：POST、GET、DELETE...
url： 要請求的地址（字符串類型）
async： 是否異步（布爾類型）
b. void send(String body)
用於發送請求
參數：
body： 要發送的數據（字符串類型）
c. void setRequestHeader(String header,String value)
用於設置請求頭
參數：
header： 請求頭的key（字符串類型）
vlaue： 請求頭的value（字符串類型）
d. String getAllResponseHeaders()
獲取所有響應頭
返回值：
響應頭數據（字符串類型）
e. String getResponseHeader(String header)
獲取響應頭中指定header的值
參數：
header： 響應頭的key（字符串類型）
返回值：
響應頭中指定的header對應的值
f. void abort()
終止請求#XmlHttpRequest對象的主要屬性：
a. Number readyState
狀態值（整數）
詳細：
0-未初始化，尚未調用open()方法；
1-啓動，調用了open()方法，未調用send()方法；
2-發送，已經調用了send()方法，未接收到響應；
3-接收，已經接收到部分響應數據；
4-完成，已經接收到全部響應數據；
b. Function onreadystatechange
當readyState的值改變時自動觸發執行其對應的函數（回調函數）
c. String responseText
服務器返回的數據（字符串類型）
d. XmlDocument responseXML
服務器返回的數據（Xml對象）
e. Number states
狀態碼（整數），如：200、404...
f. String statesText
狀態文本（字符串），如：OK、NotFound...示例：
