JSON是什么？JavaScript数据交换全解析

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JSON是什么？JavaScript如何与服务器交换数据》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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() 是高频错误。

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__）都可能让前端逻辑崩溃。

• 永远不要用 eval('(' + jsonStr + ')') 解析 JSON —— 它执行任意代码，极度危险
• 推荐加一层运行时校验，比如用 zod 或手写简单检查：if (typeof data.id !== 'number') {...}
• 敏感字段（如 token、admin）不能只靠前端判断，必须由后端鉴权 —— JSON 只是载体，不解决信任问题

JSON 的难点不在语法，而在“字符串 ↔ 对象”的转换时机和上下文责任归属。很多人卡在 res.json() 忘加 await，或 POST 时漏掉 JSON.stringify，再或者后端没配好中间件——这些地方一错，整个通信链就静默失败。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JSON是什么？JavaScript数据交换全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。