AJAX 请求发送 JSON 数据时遇到的问题

😀 ️1. 问题描述

在使用 AJAX 异步请求数据的时候, 使用场景是对一个数据详情进行 PUT 接口访问, 需要传递形似这样的 JSON 数据：

{
	"name": ["id1", "id2", "id3", "id4"]
}

那请求的 AJAX 代码如下 (简化了一些参数, 使得文章看起来更加简单 )：

$.ajax({
    url: 'request_url',
    type: 'put',
    data: {"name": ["id1", "id2", "id3", "id4"]},
    dataType: "json",
    traditional: true,
});

也是用了 traditional 参数声明了深度序列化的问题, 一切就绪后请求接口。

如果你使用 F12 查看 Network 后就会发现, 最终你解析的 JSON 数据会变成 Formdata, 而请求体的参数会变成下面这样：

name: id1
name: id2
name: id3
name: id4

此时后端接收的只是这样的 JSON 数据：

{
	"name": "id4"
}

😇 ️2. 解决方案

解决的方法是你需要对 AJAX 方法多声明一个参数：

$.ajax({
    url: 'request_url',
    type: 'put',
    data: {"name": ["id1", "id2", "id3", "id4"]},
    dataType: "json",
    traditional: true,
    headers: {'Content-Type': 'application/json'}
});

使用 headers 声明 Content-Type 类型, 但是你需要注意的是, 声明类型是 application/json 后, 你传递的类型是 JSON 序列化的字符串, 所以你需要修改你的参数是这样的：

data: JSON.stringify({"name": ["id1", "id2", "id3", "id4"]})

最后请求成功, 服务器接受的数据和我们传递的数据符合标准预期。