JSON是什么？怎么和服务器传数据

哈喽！今天心血来潮给大家带来了《JSON是什么？如何与服务器交互数据》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

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是什么？怎么和服务器传数据》文章吧，也可关注golang学习网公众号了解相关技术文章。