Django_ajax 1 簡介 AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步Javascript和XML”。即使用Javascript語言與伺服器進行非同步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。 同步交互：客戶端發出一個請求後，需 ...
Django_ajax
1 簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步Javascript和XML”。即使用Javascript語言與伺服器進行非同步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
- 同步交互：客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；
- 非同步交互：客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。
2 特點
AJAX除了非同步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
3 能向後端發送請求的方式
| 序號 | 類型 | 請求方式 |
|---|---|---|
| 1 | 瀏覽器地址欄直接輸入url | get請求 |
| 2 | a標簽的href屬性 | get請求 |
| 3 | form表單action屬性 | get請求和post請求 |
| 4 | ajax | get請求和post請求 |
4 ajax的使用
ps：作為後端人員，前期只需要學習jquery封裝之後的版本就行（不需要學習原生的ajax，原生的複雜且項目中一般不用），所以在前端
頁面使用ajax的時候需要先導入jquery！
4.1 jquery中ajax的使用方法
jquery調用ajax的方法：
格式：$.ajax({});
參數：
type：請求的方式get、post（小寫）
url："" 請求的地址，不寫預設為當前地址
async：是否非同步，預設為true表示非同步
data：發送到伺服器的數據
dataType：'json'預期伺服器返回的數據類型為json格式
contentType：設置請求頭
success：function(date){}; data是形參名，請求成功時調用此函數
error：請求失敗時調用此函數
小案例：
需求：頁面上有三個input框，在前兩個框中輸入數字 點擊按鈕 朝後端發送ajax請求，後端計算出結果 再返回給前端動態展示的到第三個input框中(整個過程頁面不准有刷新,也不能在前端計算)
html部分
<body>
<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3"><br>
<button id="btn">提交</button>
</body>
<script>
$('#btn').click(function (){ # 點擊btn按鈕時觸發click事件，執行ajax
$.ajax({
type:'post', # 指定請求方式
url:'', # 不寫預設向當前地址提交
data:{'u1':$('#d1').val(),'u2':$('#d2').val()}, #獲取需要向伺服器提交的值，使用jquery動態獲取用戶提交的值
success:function (args){ # ajax的url請求成功時執行的函數，args指的是服務端傳到客戶端的數據，如果是服務端返回的是字典，則需要進行反序列化
$('#d3').val(args) #將傳回的數據添加到d3框中
}
})
})
</script>
後端部分
def index(request):
if request.method =='POST':
u1 = request.POST.get('u1') #接收前端傳來的數據
u2 = request.POST.get('u2')
u3 = int(u1)+int(u2) # 將數據進行相加
return HttpResponse(u3) # 把結果返回給前面，註意這個用HttpResponse返回，如果是字典，則需要進行序列化
# return JsonResponse(dict) # 直接把字典序列化，前端也無需在反序列化了！
return render(request,'index.html') # 最後還需要返回原先的頁面
4.2ajax發送json格式數據和文件
詳見：django中前後端傳輸數據的編碼格式（contentType）
