前后端传输数据的编码格式(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中