兜兜轉轉一大圈，在它支持Markdown後又回來了。。
概念
學習ajax之前需要的知識儲備--json
需要注意：
// 屬性名必須使用雙引號
// 不能使用十六進制值
// 不能使用undefined
// 不能使用函數和日期對象
必會方法：
JSON.parse('JSON')
將json字符串轉爲JS對象
JSON.stringify(JS)
將JS值轉換爲json字符串
注： BeJson 、SoJson在線工具可定位和檢查格式
ajax簡介
ajax（Asynchronous Javascript And XML），用JS語言與服務器進行異步交互。
- 同步交互：客戶端發出請求後，需要等待服務器響應結束後，才能發下一個請求。
- 異步交互：客戶端發出請求後，不用等待服務器響應結束，即可發下一個請求。
除了異步的特點外，還可實現：瀏覽器頁面局部刷新。
常見的應用場景
例如百度搜索時輸入字符後，會出現一個相關聯的下拉列表。當輸入框變化，瀏覽器用ajax技術相服務器發送請求，查看包含字符的前5項，然後把查詢結果相應給瀏覽器，瀏覽器渲染顯示。
和用戶註冊時輸入錯誤在移出輸入框會顯示錯誤信息。
- 頁面不會刷新，只刷新局部位置。
- 請求發出不影響頁面其他操作。
優點
優點：
- 使用JS向服務器發送異步請求。
- 無需刷新整個頁面
- 因爲響應的只是頁面中局部內容，所以性能高。
示例：用jQuery實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>
<button class="send_Ajax">send_Ajax</button>
<script>
//$.ajax的兩種使用方式:
//$.ajax(settings);
//$.ajax(url,[settings]);
$(".send_Ajax").click(function(){
$.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"abc",password:123},
success:function(data){
alert(data)
},
//=================== error============
error: function (jqXHR, textStatus, err) {
// jqXHR: jQuery增強的xhr
// textStatus: 請求完成狀態
// err: 底層通過throw拋出的異常對象，值與錯誤類型有關
console.log(arguments);
},
//=================== complete============
complete: function (jqXHR, textStatus) {
// jqXHR: jQuery增強的xhr
// textStatus: 請求完成狀態 success | error
console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
console.log('textStatus: %s', textStatus);
},
//=================== statusCode============
statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments); //注意：後端模擬errror方式：HttpResponse.status_code=500
},
'400': function () {
}
}
})
})
</script>
</body>
</html>view
import json,time
def index(request):
return render(request,"index.html")
def handle_Ajax(request):
username=request.POST.get("username")
password=request.POST.get("password")
print(username,password)
time.sleep(10)
return HttpResponse(json.dumps("Error Data!"))$.ajax參數
請求參數
data---------################
data: 當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式
(urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。
function testData() {
$.ajax("/test",{ //此時的data是一個json形式的對象
data:{
a:1,
b:2
}
}); //?a=1&b=2
processData---------################
processData：聲明當前的data數據是否進行轉碼或預處理，默認爲true，即預處理；if爲false，
那麼對data：{a:1,b:2}會調用json對象的toString()方法，即{a:1,b:2}.toString()
,最後得到一個［object，Object］形式的結果。
contentType---------################
contentType：默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。
用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交數據，
比如contentType:"application/json"，即向服務器發送一個json字符串：
$.ajax("/ajax_get",{
data:JSON.stringify({
a:22,
b:33
}),
contentType:"application/json",
type:"POST",
}); //{a: 22, b: 33}
注意：contentType:"application/json"一旦設定，data必須是json字符串，不能是json對象
views.py: json.loads(request.body.decode("utf8"))
traditional---------################
traditional：一般是我們的data數據有數組時會用到 ：data:{a:22,b:33,c:["x","y"]},
traditional爲false會對數據進行深層次迭代； 響應參數
dataType： 預期服務器返回的數據類型,服務器端返回的數據會根據這個值解析後，傳遞給回調函數。
默認不需要顯性指定這個屬性，ajax會根據服務器返回的content Type來進行轉換；
比如我們的服務器響應的content Type爲json格式，這時ajax方法就會對響應的內容
進行一個json格式的轉換，if轉換成功，我們在success的回調函數裏就會得到一個json格式
的對象；轉換失敗就會觸發error這個回調函數。如果我們明確地指定目標類型，就可以使用
data Type。
dataType的可用值：html｜xml｜json｜text｜script
注： 在服務端設定好返回的數據類型 return HttpResponse(json.dumps(a),content_type="application/json")
javascript實現Ajax
Ajax核心
是在javascript中多添加個XMLHttpRequest對象。所有異步交互都是用它完成。
使用時用new生產該對象。
使用流程
1.打開與服務器的鏈接（open方法）
對象生產後，使用open方法連接服務器，參數如下：
open(method,url,async)
- method：請求方式，post或get
- URL：服務器的URI（資源地址），若get請求可追加參數。
- async：是否異步，默認爲TRUE2.發送請求（send方法）
需要參數爲post請求的請求體內容，若無則給null。
3.接受響應
請求發出去後服務器執行，返回後接受方法如下：
onreadystatechange事件在該對象發生變化時被調用
XMLHttpRequest對象的五種狀態：
- 0：初始化未完成，創建了對象爲調用open方法
- 1：請求已開始。open方法調用，爲調用send方法
- 2：請求發送完成。調用了send
- 3：開始讀取服務端響應
- 4：讀取結束。
爲防止在1234時都引發。要使用對象的readyState屬性拿到狀態值。
在建立請求後就定義該事件，設一個匿名方法判斷狀態值。
發送post請求注意事項
要使用setRequestheader設置content-type請求頭，因form表單默認不設定，不然會忽略請求體內容
設置好就能發請求體了。
小結
例：用戶名是否被註冊
填完光標移開後就像服務器發送異步請求，服務器返回布爾值，客戶端根據布爾值渲染用戶框
步驟：
1.在用戶名錶單字段中添加onblur事件，調用send方法。
2.send方法獲取字段內容，向服務器發送異步請求，參數爲用戶名
3.Django的view：獲取參數，判斷，符合則響應TRUE，否則FALSE
jQuery的serialize()
用於序列化表單元素並編碼爲utf-8，用於提交，提交有name和value值的。
不在form內的，沒name的，有disabled的都不提交。、
序列化後如下：
user=abc&password=123
使用時 $("form").serialize()
form表單上傳文件
設置input的type爲file
服務端接收時用request.FILES
Ajax的FormData對象實現Ajax上傳文件
用於異步上傳二進制文件。
new來初始化創建對象。
提取文件對象$("#id")[0].files[0]
使用append方法把文件對象添加到formdata對象中
用$.ajax({……,data:formdata,……}) 發送到服務端