目錄
Ajax簡介
Ajax（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
ajax是異步提交的
Ajax 不是新的編程語言，而是一種使用現有標准的新方法。
Ajax 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
舉個實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
<button id="b1">計算</button>
</p>
<script>
$('#b1').on('click', function () {
$.ajax({
url:'', // 數據提交的地址， 不寫就是向當前頁面提交，也可以寫后綴，也可以寫全稱，與form表單參數action一樣
type: 'post', // 提交方式，不寫默認是get請求
data: {'t1': $('#t1').val(), 't2':$('#t2').val()}, // 提交的數據
success: function (data) { // 形參data就是異步提交之后后端返回的結果
$('#t3').val(data)
}
})
})
</script>
</body>
</html>
數據傳輸編碼格式的解析
前后端交互式一個數據編碼格式，針對不同的數據，后端會進行不同的處理
三種格式：
- urlencoded
- formdata
- application/json
form表單發送三種數據格式的情況
form表單post請求默認的編碼格式是urlencoded
在瀏覽器-->檢查-->network可以看到，我們form表單在提交數據的時候，有如下信息：
Request Headers： # 請求頭
Content-Type:application/x-www-form-urlencoded; charset=UTF-8 # 數據編碼格式-urlencoded
Form Data：# 攜帶的數據
d1=23&d2=23
在我們后端django中針對urlencoded數據，會自動解析並封裝到request.POST方法中
form表單發送文件
Request Headers： # 請求頭
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ # 數據編碼格式，-form-data
Form Data：#針對form-data格式的數據，在瀏覽器是無法查看的
發送到后端django，文件對象會自動解析到 request.POST 和 request.FILES 中，前者記錄文件名，后者記錄對象。
form表單無法發送json格式的數據，要想實現，只能借助ajax
ajax發送數據的編碼格式
默認的編碼格式也是urlencoded
ajax傳輸json格式數據
有個參數，contentType，不寫默認是urlencoded，
在view.py中
import json
def home(request):
if request.method == "POST":
print(request.body)
json_bytes = request.body
print(json.loads(json_bytes), type(json.loads(json_bytes)))
# 反序列化為python字典格式
return render(request, 'form_test.html')
# 結果：
'''
b'{"d1":"cwz","d2":"123"}'
{'d1': 'cwz', 'd2': '123'} <class 'dict'>
'''
form_test.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
username: <input type="text" name="username" id="d1">
password: <input type="text" name="password" id="d2">
</form>
<button id="d3">點我發送json格式</button>
<script>
$('#d3').click(function () {
$.ajax({
url:'',
type:'post',
contentType:'application/json', //需要指定編碼格式為json
data:JSON.stringify({'d1':$('#d1').val(),'d2':$('#d2').val()}), // 需要前端發送JSON字符串，JSON。stringify序列化即可。
success:function (data) {
alert(123)
}
})
})
</script>
</body>
</html>
ajax傳json格式數據特點：
django后端針對json格式的數據 不會自動幫你解析 會直接原封不動的給你放到request.body中 你可以手動處理 獲取數據。拿到request.body是一個bytes類型數據
Ajax傳輸文件數據
需要借助內置對象，該對象既可以攜帶文件數據，同樣也支持普通的鍵值對
注意幾個參數：
-
data：formdata對象 -
contentType：false -
processData：false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
username:<input type="text" name="username">
password:<input type="text" name="password">
myfile:<input type="file" name="myfile" id="d1">
<button id="d2">點我發送文件</button>
<script>
$('#d2').click(function () {
// 先生成一個內置對象
var MyFormData = new FormData();
// 先添加普通的鍵值
MyFormData.append('username', 'cwz');
MyFormData.append('password', '123');
//添加文件數據
MyFormData.append('myfile', $('#d1')[0].files[0]); // 將jquery對象轉換成原生的js對象,利用原生js對象的方法 直接獲取文件內容
$.ajax({
url: '',
type: 'post',
data: MyFormData,
contentType: false, //不用任何編碼,因為formData對象自帶編碼 django能夠識別該對象
processData: false, //告訴瀏覽器不要處理我的數據 直接發就行
success: function (data) {
}
})
})
</script>
</body>
</html>
django內置序列化模塊
序列化的目的就是 將數據整合成一個大字典
導入這個模塊：from django.core import serializers
比自己用json轉方便多了
from app01 import models
from django.core import serializers
def yyy(request):
author_queryset = models.Author.objects.all()
res = serializers.serialize('json', author_queryset)
return HttpResponse(res)
效果：
[{
"model": "app01.author",
"pk": 1,
"fields": {
"name": "\u90b6\u98ce",
"email": "123@qq.com",
"author_detail": 1
}
}, {
"model": "app01.author",
"pk": 2,
"fields": {
"name": "\u5f0f\u5fae",
"email": "111@sin.com",
"author_detail": 2
}
}, {
"model": "app01.author",
"pk": 3,
"fields": {
"name": "\u65e0\u540d",
"email": "100@qq.com",
"author_detail": 3
}
}]