说明：仅处理 post，put，delete请求，get请求不在本文描述
代码
前端发送js对象
// jquery默认的content-type是 application/x-www-form-urlencoded，按以下方式发送后端调用POST方法即可接收，如果有小程序调用后端接口，可能默认的content-type是 application/json，需要将其改成application/x-www-form-urlencoded后端才能使用POST接收处理
<input type="text" name="name" id="name">
$.ajax({
type: ‘post‘,
url: ‘/withtag_ajax/‘,
data: {name: $("#name").val()}, // data直接是js对象
success: function (data) {
$(‘#info‘).text(data.msg)
}
}
)
1
2
3
4
5
6
7
8
9
10
11
后端代码
def withtag_ajax(request):
print(request.POST) # 输出<QueryDict: {‘name‘: [‘django‘]}>
return JsonResponse({‘code‘: 1})
1
2
3
此种方式直接使用django的request.POST即可处理
前端发送json字符串
<input type="text" name="name" id="name">
$.ajax({
type: ‘post‘,
url: ‘/withtag_ajax/‘,
data: JSON.stringify({name: $("#name").val()}), // 转换成json字符串
contentType: "application/json", // 指定发送到后端数据类型是json字符串
success: function (data) {
$(‘#info‘).text(data.msg)
}
}
)
1
2
3
4
5
6
7
8
9
10
11
后端代码
def withtag_ajax(request):
# json.loads用途：将 包含JSON文档的`str`，`bytes`或`bytearray`实例 反序列化为Python对象。
ret = json.loads(request.body)
print(ret) # {‘name‘: ‘django‘} 字典对象
return JsonResponse({‘code‘: 1, ‘msg‘: ‘success‘})
1
2
3
4
5
如果前端指定发送json字符串，后端就这么接收即可。
注意：前端如果发送data是json字符串，而又未指定contentType为application/json，也就是使用其默认值application/x-www-form-urlencoded，那么后端是无法处理的，无论是request.body.decode(‘utf-8‘)还是 request.POST接收到的都是<QueryDict: {‘{"name":"django"}‘: [‘‘]}>；使用默认值，就直接发送js对象即可。
前端发送文件与form表单数据
<form id="myform">
用户名：<input type="text" name="name" id="name">
<input type="file" id="file">
<a id="submit">提交</a>
</form>
1
2
3
4
5
// 为jquery添加序列化form表单的功能
$.prototype.serializeObject = function () {
var obj = new Object();
$.each(this.serializeArray(), function (index, param) {
if (!(param.name in obj)) {
obj[param.name] = param.value;
}
});
return obj;
};
$("#submit").click(function () {
var formdata = new FormData();
formdata.append(‘aaa‘, $(‘#file‘)[0].files[0]); // 文件数据
formdata.append(‘data‘, JSON.stringify($("#myform").serializeObject())); // form表单数据
console.log(JSON.stringify($("#myform").serializeObject()))
console.log($("#myform").serializeObject())
$.ajax({
type: ‘post‘,
url: ‘/withtag_ajax/‘,
data: formdata,
processData: false, // tell jquery not to process the data，必须
contentType: false, // tell jquery not to set contentType，必须
success: function (data) {
$(‘#info‘).text(data.msg)
}
}
)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
后端代码
def withtag_ajax(request):
print(request.POST) # <QueryDict: {‘data‘: [‘{"name":"django"}‘]}>
data = request.POST.get(‘data‘) # json字符串，需要使用json.loads()转换为字典对象
print(request.FILES.get(‘aaa‘)) # 文件对象，注意名称和前端保持一致
return JsonResponse({‘code‘: 1, ‘msg‘: ‘success‘})
1
2
3
4
5
请求方式为put，delete时，传递json字符串
<input type="text" name="name" id="name">
$.ajax({
type: ‘put‘,
url: ‘/withtag_ajax/‘,
data: JSON.stringify({name: $("#name").val()}), // 转换成json字符串
contentType: "application/json", // 指定发送到后端数据类型是json字符串
success: function (data) {
$(‘#info‘).text(data.msg)
}
}
)
1
2
3
4
5
6
7
8
9
10
11
后端代码
def withtag_ajax(request):
print(request.body) # b‘{"name":"django"}‘
print(json.loads(request.body)) # {‘name‘: ‘django‘}
return JsonResponse({‘code‘: 1, ‘msg‘: ‘success‘})
1
2
3
4
请求方式为put，delete时，传递js对象
$.ajax({
type: ‘put‘,
url: ‘/withtag_ajax/‘,
data: $("#myform").serializeObject(),
success: function (data) {
$(‘#info‘).text(data.msg)
}
}
)
1
2
3
4
5
6
7
8
9
后端代码
def withtag_ajax(request):
print(request.body) # b‘name=django‘
print(QueryDict(request.body.decode(‘utf-8‘))) # <QueryDict: {‘name‘: [‘django‘]}>
return JsonResponse({‘code‘: 1, ‘msg‘: ‘success‘})
1
2
3
4
综上所述，当为post请求时，可根据前端传递的是js对象还是json字符串，后端使用不同的方式接收；当为put请求时，前端传递json字符串时，处理方式和post雷同，传递js对象时，需要手动转换为QueryDict对象
以上几种情况后端代码分别通过request.body 和 request.POST 取数据
可通过判断 request.META["CONTENT_TYPE"] 进行辨别，如果是 application/json 就按request.body，如果是 application/x-www-form-urlencoded，就按 request.POST，使得后端更健壮
ajax常用参数说明：
async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
data
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
1
2
3
4
5
6
contentType
类型：String
默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
success
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。
type
类型：String
默认值: “GET”)。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url
类型：String
默认值: 当前页地址。发送请求的地址。
error
类型：Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。
这是一个 Ajax 事件。
更多参数见：http://www.w3school.com.cn/jquery/ajax_ajax.asp
————————————————
版权声明：本文为CSDN博主「HYESC」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/HYESC/java/article/details/95459783
原文：https://www.cnblogs.com/cycxtz/p/12639808.html