17370845950

JSON是前后端交互常用格式，JavaScript通过JSON.parse()和JSON.stringify()实现对象与字符串转换，结合Fetch API可高效传输数据，需注意合法格式、请求头、跨域及参数传递规范，建议约定统一接口结构并校验数据。

前后端交互中，JSON 是最常用的数据格式之一。JavaScript 通过原生支持 JSON 的解析与序列化，让数据传输变得简单高效。前端发送请求获取或提交数据，后端返回结构化的 JSON 响应，整个过程清晰且易于维护。

JSON 数据的基本操作

JavaScript 提供了两个核心方法来处理 JSON：

• JSON.parse()：将 JSON 字符串转换为 JavaScript 对象。常用于处理从服务器返回的 JSON 数据。
• JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串。适合在发送 POST 请求时封装数据。

例如，后端返回的用户信息字符串可以通过 parse 转为对象：

const jsonString = '{"name": "张三", "age": 25}';
const user = JSON.parse(jsonString);
console.log(user.name); // 输出：张三

而前端想提交表单数据时，可用 stringify 序列化：

const data = { username: "李四", email: "lisi@example.com" };
fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

使用 Fetch 进行前后端通信

Fetch API 是现代浏览器提供的原生方法，用于发起网络请求。它基于 Promise，语法简洁，适合处理 JSON 数据交互。

从后端获取 JSON 数据示例：

fetch('/api/data')
  .then(response => response.json()) // 将响应体解析为 JSON
  .then(data => {
    console.log('收到数据:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

注意：response.json() 方法自动调用 JSON.parse，无需手动处理字符串。

常见问题与注意事项

在实际开发中，有几个关键点容易出错：

• 确保后端返回的确实是合法 JSON，否则 parse 会抛错。可通过 try-catch 包裹或依赖 response.json() 的容错机制。
• 设置正确的请求头 Content-Type: application/json，否则后端可能无法识别提交的数据格式。
• 跨域请求需后端配置 CORS，避免浏览器拦截。
• GET 请求不应携带 body，传参应使用 URL 参数；POST 请求才适合用 JSON 提交数据体。

前后端协作建议

为了提升开发效率和减少联调问题，建议：

• 约定统一的接口返回结构，如 { code, message, data } 模式。
• 前端根据 code 判断请求是否成功，不要仅依赖 HTTP 状态码。
• 使用 TypeScript 或 JSON Schema 校验数据结构，提前发现字段不一致问题。
• 开发阶段使用 Mock 数据模拟接口，降低对后端的依赖。

基本上就这些。掌握 JSON 处理和 Fetch 使用，就能应付大多数前后端交互场景。关键是理解数据流向和格式转换时机，写代码时更自信也更少出错。