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 序列化：
立即学习“Java免费学习笔记（深入）”；
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 数据交互。
HTML5点击添加商品购物车代码
下载
这个插件使用了HTML5的新特效：storage ，就是游览器数据库的功能，这跟之前把数据存在cookies里面原理是相识的，这样的好处在于用户刷新页面，数据还在，，又不需要跟后端进行数据交互。
从后端获取 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 使用，就能应付大多数前后端交互场景。关键是理解数据流向和格式转换时机，写代码时更自信也更少出错。
