第六章

JavaScript 中的 JSON

原生 JSON 支持和前后端数据交互

原生 JSON 方法

JavaScript 原生支持 JSON，提供了两个核心方法：

JSON.stringify()

将 JavaScript 对象转换为 JSON 字符串

const obj = {name: "张三", age: 30};
const json = JSON.stringify(obj);
console.log(json);
// {"name":"张三","age":30}

JSON.parse()

将 JSON 字符串转换为 JavaScript 对象

const json = '{"name":"李四","age":28}';
const obj = JSON.parse(json);
console.log(obj.name);
// 李四
🛠️

调试小贴士

JSON.stringify 输出的字符串太长很难看？虽然可以加参数格式化，但更推荐直接复制到在线工具中查看树形结构。

👉 打开 JSON 格式化工具

前后端数据交互

使用 Fetch API

// 获取数据
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 更新页面
  })
  .catch(error => console.error('Error:', error));

// 发送数据
fetch('/api/users', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({name: '张三', age: 30})
})
  .then(response => response.json())
  .then(data => console.log(data));

LocalStorage 存储

LocalStorage 只能存储字符串，需要使用 JSON 来存储对象： 

// 保存数据
const user = {name: '张三', age: 30};
localStorage.setItem('user', JSON.stringify(user));

// 读取数据
const stored = localStorage.getItem('user');
const userObj = JSON.parse(stored);
console.log(userObj.name);
上一章：Python 实战 下一章：Java 实战