JSON是文本交换格式规范,本质为字符串而非JS对象;需用JSON.stringify()序列化发送,用response.json()解析接收,且须正确设置Content-Type和后端中间件。

JSON 是什么:不是对象,是字符串格式
JavaScript 中的 JSON 不是数据类型,也不是对象,而是一套**文本交换格式规范**。它长得像 JS 对象字面量,但本质是字符串——这点必须分清。常见错误就是把一个 JS 对象直接当 JSON 用,结果在 fetch 请求体里传了对象却没序列化,服务器收不到或报错 400 Bad Request。
-
JSON.stringify({name: "Alice"})→ 得到字符串'{"name":"Alice"}',这才是合法 JSON -
{name: "Alice"}是 JS 对象,不是 JSON;直接传给fetch的body会出错 - JSON 格式严格:键名必须双引号、不能有尾逗号、不支持函数/undefined/Date/RegExp 等 JS 特有值
发送 JSON 到服务器:记得设 header 和 string 化
浏览器默认不会自动把 JS 对象转成 JSON 字符串,也不会自动设置请求头。漏掉任一环节,后端大概率解析失败或返回 400。
fetch('/api/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json' // 必须显式声明
},
body: JSON.stringify({id: 123, status: 'active'}) // 必须手动 stringify
})
- 如果后端是 Express,没写
app.use(express.json()),即使前端发对了也会收到req.body为undefined - 用
FormData或URLSearchParams发送时,Content-Type会自动设为对应类型,但它们不是 JSON —— 别混用 - 某些老接口要求
Content-Type: text/plain却传 JSON 字符串,属于设计缺陷,但你得适配:此时仍要JSON.stringify,只是 header 换掉
从服务器接收 JSON:响应体要手动 parse
fetch 返回的 Response 对象不会自动解析 JSON。调用 response.json() 才触发解析,且它返回 Promise —— 忘记 await 或 .then() 是高频错误。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容,不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
fetch('/api/user/1')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json(); // 这一步才真正解析字符串为 JS 对象
})
.then(data => console.log(data.name)) // data 是对象,不是字符串
.catch(err => console.error(err));
-
res.json()在响应体不是合法 JSON 时会 reject(比如后端返回 HTML 错误页),务必加错误处理 - 不要写
JSON.parse(res.text()):多此一举,且res.text()也是异步的,不如直接用res.json() - 如果后端返回的是 JSONP 或纯文本 JSON(如
"{...}"带引号),那才是JSON.parse(await res.text())的场景,但极少遇到
JSON 安全边界:别用 eval,也别信后端所有字段
虽然 JSON.parse 比 eval 安全得多,但它只保证语法安全,不校验数据结构和内容。后端字段缺失、类型错乱、注入字段(比如意外返回了 __proto__)都可能让前端逻辑崩溃。
立即学习“Java免费学习笔记(深入)”;
- 永远不要用
eval('(' + jsonStr + ')')解析 JSON —— 它执行任意代码,极度危险 - 推荐加一层运行时校验,比如用
zod或手写简单检查:if (typeof data.id !== 'number') {...} - 敏感字段(如
token、admin)不能只靠前端判断,必须由后端鉴权 —— JSON 只是载体,不解决信任问题
res.json() 忘加 await,或 POST 时漏掉 JSON.stringify,再或者后端没配好中间件——这些地方一错,整个通信链就静默失败。










