前后端傳輸數據的編碼格式(contentType)
我們主要研究post請求數據的編碼格式
get請求數據就是直接放在url后面的
url?username=jason&password=123
可以朝后端發送post請求的方式
1.form表單 2.ajax請求
前后端傳輸數據的編碼格式
urlencoded
formdata
json
研究form表單
默認的數據編碼格式是urlencoded 數據格式:username=jason&password=123 django后端針對符合urlencoded編碼格式的數據都會自動幫你解析封裝到request.POST中 username=jason&password=123 >>> request.POST 如果你把編碼格式改成formdata，那么針對普通的鍵值對還是解析到request.POST中而將文件解析到request.FILES中 form表單是沒有辦法發送json格式數據的
研究ajax
默認的編碼格式也是urlencoded 數據格式:username=jason&age=20 django后端針對符合urlencoded編碼格式的數據都會自動幫你解析封裝到request.POST中 username=jason&age=20 >>> request.POST
ajax發送json格式數據
前后端傳輸數據的時候一定要確保編碼格式跟數據真正的格式是一致的,不要騙人家!!! {"username":"jason","age":25} 在request.POST里面肯定找不到 django針對json格式的數據 不會做任何的處理 request對象方法補充 request.is_ajax() 判斷當前請求是否是ajax請求 返回布爾值
前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-danger" id="d1">點我</button>
<script>
$('#d1').click(function () {
$.ajax({
url: '',
type: 'post',
contentType : 'application/json',
data: JSON.stringify({'username':'egon','age':80}),
success:function (args) {
}
})
})
</script>
</body>
</html>
django后端views代碼
def ab_json(request): import json if request.is_ajax(): # print(request.body) # b'{"username":"egon","age":80}' json_bytes = request.body json_str = json_bytes.decode('utf-8') json_dict = json.loads(json_str) # json.loads括號內如果傳入了一個二進制格式的數據那么內部自動解碼再反序列化 # json_dict = json.loads(json_bytes) print(json_dict) # {'username': 'egon', 'age': 80} return render(request, 'ab_json.html', locals())
注意
ajax發送json格式數據需要注意點 1.contentType參數指定成:application/json 2.數據是真正的json格式數據 3.django后端不會幫你處理json格式數據需要你自己去request.body獲取並處理
ajax發送文件數據
ajax發送文件需要借助於js內置對象FormData
前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>username:<input type="text" id="d1"></p>
<p>password:<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button class="btn btn-info" id="d4">點我</button>
<script>
// 點擊按鈕朝后端發送普通鍵值對和文件數據
$('#d4').click(function () {
//需要先利用FormData內置對象
let form_data_obj = new FormData();
//添加普通的鍵值對
form_data_obj.append('username',$('#d1').val());
form_data_obj.append('age',$('#d2').val());
//添加文件對象
form_data_obj.append('myfile',$('#d3')[0].files[0]);
//將對象基於ajax發送給后端
$.ajax({
url:'',
type: 'post',
data: form_data_obj,
// ajax發送文件必須要指定的兩個參數
contentType: false, // 不需使用任何編碼 django后端能夠自動識別formdata對象
processData: false, // 告訴你的瀏覽器不要對你的數據進行任何處理
})
})
</script>
</body>
</html>
后端django views.py代碼
def ab_file(request): if request.is_ajax(): if request.method == 'POST': print(request.POST) print(request.FILES) return render(request,'ab_file.html')
總結
總結: 1.需要利用內置對象FormData // 2 添加普通的鍵值對 formDateObj.append('username',$('#d1').val()); formDateObj.append('password',$('#d2').val()); // 3 添加文件對象 formDateObj.append('myfile',$('#d3')[0].files[0]) 2.需要指定兩個關鍵性的參數 contentType:false, // 不需使用任何編碼 django后端能夠自動識別formdata對象 processData:false, // 告訴你的瀏覽器不要對你的數據進行任何處理 3.django后端能夠直接識別到formdata對象並且能夠將內部的普通鍵值自動解析並封裝到request.POST中 文件數據自動解析並封裝到request.FILES中