ajax 影响转义行为的原因

AJAX 请求通常使用 application/x-www-form-urlencoded 或 application/json 作为内容类型（Content-Type）。

一、不同的编码方式会导致不同的转义行为

application/x-www-form-urlencoded

这是表单默认的编码方式，会将请求参数序列化为 URL 编码形式。

JSON 字符串中的某些字符可能会被 URL 编码转义，例如：

• 空格变为 +
• " 转为 %22
• { 转为 %7B
• } 转为 %7D

application/json

如果 Content-Type 是 application/json，数据以 JSON 格式发送，通常不会对 JSON 字符串本身做额外的转义。

二、不同的前端方法对参数的处理方式不同

jQuery

如果你使用的是 jQuery 的 $.ajax，默认会根据 Content-Type 对参数进行序列化处理：

$.ajax({
url: ‘/api’,
method: ‘POST’,
data: {
arrayParam: [
JSON.stringify({ key: “value1” }),
JSON.stringify({ key: “value2” })
]
}
});

• 默认 Content-Type: application/x-www-form-urlencoded 时，JSON 字符串会被 URL 编码。
• 如果手动指定 Content-Type: application/json，需要将数据序列化为 JSON，避免重复编码：

$.ajax({
url: ‘/api’,
method: ‘POST’,
contentType: ‘application/json’,
data: JSON.stringify({
arrayParam: [
JSON.stringify({ key: “value1” }),
JSON.stringify({ key: “value2” })
]
})
});

Fetch API

fetch 的默认行为是不会对请求体进行额外转义，只需要确保正确设置 Content-Type：

fetch(‘/api’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({
arrayParam: [
JSON.stringify({ key: “value1” }),
JSON.stringify({ key: “value2” })
]
})
});

三、后端接收时出现问题

尽管前端发送的 JSON 数据一般不会被多次转义，但某些后端配置或处理机制可能会对接收到的参数进行自动转义。例如：

• PHP 的 magic_quotes_gpc（已弃用）：会自动对输入进行转义。
• HTML 表单嵌套 JSON：JSON 数据如果直接插入到 HTML 表单字段中传输，可能被浏览器自动转义。