一:Ajax
- 引入Ajax:
我們知道，前端頁面想要和后端進行數據交互，可以通過以下方式
- 將參數添加到url中，后端通過get方式從url中獲取數據 GET請求
- 前端頁面通過form表單，將數據以get或者post的方式發送給后端 POST請求/GET請求
- 前端通過a標簽(和使用url方式參數的方式) GET請求
此外，我們還可以使用ajax技術來實現前后端數據的交互。
- Ajax GET請求/POST請求
1.什么是Ajax？
1.AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用javascript語言與服務器進行異步交互，傳輸的數據為XML(當然，傳輸的數據不只是XML)。
2.Ajax不是新的編程語言，而是一種使用現有標准的新方法。
2.Ajax最大的優點
1.Ajax最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。
(這一特點給用戶的感受是在不知不覺中完成請求和響應過程)
2.Ajax不需要任何瀏覽器插件，但需要用戶允許javaScript在瀏覽器上執行。
- 同步交互: 客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求。
- 異步交互: 客戶端發出一個請求后，無需要等待服務器響應結束，就可以發出第二個請求。
Ajax用於"局部刷新頁面"和"異步提交"的特點
異步提交: 提交完認為不需要原地等待，立馬就做其他事
局部刷新: 不在局限於整個頁面的刷新，而是在於局部的某一個頁面的小塊刷新
因此和使用Form表單和后端進行數據交互的方式比較，具有以下優點:
- Ajax使用JavaScript技術向服務器發送異步請求
- Ajax請求無須刷新整個頁面
- 因為服務器響應內容不再是整個頁面，而是頁面中的部分內容，所以Ajax性能高！
3.Ajax工作原理
1.Ajax相當於在用戶和服務器之間加了一個中間層(Ajax引擎),使用戶操作與服務器響應異步化。
2.並不是所有用戶請求都是提交給服務器，像一些數據驗證和數據處理等都交給Ajax引擎自己來做，只有確定需要從服務器讀取數據時再由Ajax引擎代為向服務器提交請求。
3.客戶端發送請求，請求交給Ajax，Ajax把請求提交給服務器，服務器進行業務處理，服務器響應數據交給Ajax對象，Ajax對象接收數據，由JavaScript把數據寫到頁面上。
要完整實現一個Ajax異步調用和局部刷新，同窗需要以下幾個步驟:
1.創建XMLHttpRequest對象，既創建一個異步調用對象
2.創建一個新的HTTP請求，並指定該HTTP請求的方法，URL及驗證信息
3.設置響應HTTP請求狀態變化的函數
4.發送HTTP請求
5.獲取異步調用返回數據
6.使用JavaSciript和DOM實現局部刷新
注意:
Ajax傳輸數據為XML(當然，傳輸數據不只是XML，現在更多使用json數據，基本上web頁面都是Ajax)
4.Ajax使用jQuery封裝
1.使用原生js寫Ajax請求(沒有人使用)
1.原生的復雜並且在實際項目中也一般不用
2.區分瀏覽器，需要做瀏覽器兼容
2.現在主流用法(jQuery已經封裝好了)
1.jQuery內部封裝了DOM和BOM原生js
2.jQuery更加簡便(宗旨: "Write less, do more")
jQuery介紹使用鏈接:https://www.cnblogs.com/goOJBK/p/15890701.html
5.Ajax基本語法
$.ajax({
// 發送地址 1.不寫默認朝當前所在url提交數據
// 2.全寫 指名道姓 https://www.baidu.com
// 3.只寫后綴/login/
url: '',
type: 'get/post', // 請求方式 默認get
data: {'username':'jason', 'password':123} // 要發送的數據
success:function(args){
// 回調函數(異步回調機制)
}
})
解析(重要):
1.當你在利用ajax進行前后端交互的時候
2.當后端給你返回結果的時候會自動觸發 args接受后端的返回結果
二:Ajax使用案例
1.案例需求
頁面上有三個input框:
1.在前兩個框中輸入數字 點擊按鈕 朝后端發送ajax請求
2.后端計算出結果 再返回給前端動態展示的到第三個input框中
(整個過程頁面不准有刷新,也不能在前端計算)
2.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--jQuery引入 CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
<button id="btn">點我</button>
</p>
<script> // 記得導入jQuery 注釋掉settings第四行
// 先給按鈕綁定一個點擊事件
$('#btn').click(function () {
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝那個后端發送ajax請求
url:'', // 不寫就是朝當前地址提交
// 2.請求方式
type:'post', // 不指定默認就是get 都是小寫
// 3.數據
data:{'i1':$('#d1').val(), 'i2':$('#d2').val()}, // 拿到#d1 與 #d2 內容
// 4.回調函數=(異步回調機制)
// 當后端給你返回結果的時候會自動觸發 args接受后端的返回結果
success:function (args) { // 目前無論后端返回什么，包括頁面，都是args接收
{#alert(args) #}
// 通過DOM操作動態渲染到第三個input里面
$('#d3').val(args)
}
})
})
</script>
</body>
</html>
3.views.py
from django.shortcuts import render, HttpResponse
def ab_ajax(request):
# 前端請求
if request.method == "POST":
# print(request.POST) # <QueryDict: {'i1': ['111'], 'i2': ['222']}>
# 拿到接收數據 進行加法運算 在返回回去
i1 = request.POST.get('i1')
i2 = request.POST.get('i2')
# 先轉成整型再加
i3 = int(i1) + int(i2)
print(i3)
# 返回給前端
return HttpResponse(i3)
return render(request, 'index.html')
三:驗證json后端返回前端字典
- views.py
from django.shortcuts import render, HttpResponse
import json
def ab_ajax(request):
# 前端請求
if request.method == "POST":
# 返回給字典
d = {'code':100, 'msg':i3}
return HttpResponse(json.dumps(d)) # 返回字典需要序列化
return render(request, 'index.html')
四:驗證JsonResponse后端返回值
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--jQuery引入 CDN-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
<button id="btn">點我</button>
</p>
<script> // 記得導入jQuery 注釋掉settings第四行
// 先給按鈕綁定一個點擊事件
$('#btn').click(function () {
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝那個后端發送ajax請求
url:'', // 不寫就是朝當前地址提交
// 2.請求方式
type:'post', // 不指定默認就是get 都是小寫
// 3.數據
data:{'i1':$('#d1').val(), 'i2':$('#d2').val()}, // 拿到#d1 與 #d2 內容
// 4.回調函數=(異步回調機制)
// 當后端給你返回結果的時候會自動觸發 args接受后端的返回結果
success:function (args) { // 目前無論后端返回什么，包括頁面，都是args接收
console.log(typeof args) // 打印當前返回值類型
}
})
})
</script>
</body>
</html>
- views.py
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
def ab_ajax(request):
# 前端請求
if request.method == "POST":
# 返回給字典
d = {'code':100, 'msg':666}
return JsonResponse(d)
return render(request, 'index.html')
五:總結兩種序列化方式
針對后端如果是用HttpResponse返回的數據 回調函數不會自動幫你反序列化
如果后端直接用的是JsonResponse返回數據 回調函數會自動幫你反序列化
HttpResponse不會自動反序列化解決方式
1.自己在前端利用JSON。parse()
2.在ajax里面配置一個參數
1.知識儲備
# 擴展 參數 代碼發布項目還會涉及
dataType:'JSON'
當后端是以HttpResponse返回的json格式的數據
默認是不會自動反序列化的
1.自己手動JSON.parse()
2.配置dataType參數