为什么jQuery POST直接传data失效，传{data:data}格式却能正常运行？

核心逻辑说明 #

首先明确jQuery对$.ajax中data参数的默认处理规则：

• 当data传入的是普通JavaScript对象时，jQuery会自动将其序列化为application/x-www-form-urlencoded格式的表单键值对，请求头的Content-Type默认也会设为该值，符合绝大多数后端接口的默认参数接收规则。
• 当data传入的是字符串且手动指定Content-Type: application/json时，请求体会直接发送原始JSON字符串，要求后端必须配置接收JSON格式的请求体才能解析。

两种写法的差异 #

原错误写法的问题

原代码中你提前把数据做了JSON.stringify处理得到JSON字符串，又手动指定了contentType: 'application/json'，相当于给后端发送的是原始JSON格式的请求体。如果后端接口没有做接收JSON请求的适配，自然无法解析参数，导致请求失败。

{data: data}的作用

这里的写法是构造了一个普通JS对象：

• 键（第一个data）是提交给后端的参数名
• 值（第二个data）是你提前序列化好的JSON字符串

你把这个对象传给data参数后，jQuery会自动把它序列化为表单格式的请求体，格式如下：

data=%7B%22color%22%3A%5B%7B%22colorId%22%3A%22A%22%7D%2C%7B%22colorId%22%3A%22B%22%7D%5D%7D

这种格式是后端接口默认支持的参数格式，后端只需要取出名为data的参数，再做JSON反序列化就能拿到你要提交的完整数据，自然请求就可以正常执行。

额外说明 #

修改后的代码里加的dataType: 'JSON'和请求能否成功发送无关，它的作用是告诉jQuery期望后端返回JSON格式的结果，会自动把返回值解析为JS对象，方便后续处理。
另外你示例代码里对象属性结尾的分号是语法错误，实际写代码时要改成逗号。

内容的提问来源于stack exchange，提问作者Snm Jpa