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）
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/505476.html
標籤：其他
上一篇：python 作用域與命名空間