企业官网建设流程全解析

JSON

1. JSON 解决什么问题？

前端页面是 JS，后端是 Java/Python/PHP。两门语言不能直接交换对象。

• JS 有对象{name:"张三"}；后端有自己的对象，不能直接传给浏览器。
• JSON 就是跨语言通用文本格式。 把数据转成一段字符串文本，网络传输只传文本；两端各自把文本转回自己语言能识别的数据。

一句话总结：JSON = 不同语言之间传递数据的通用翻译文本

2. JSON 使用场景

1. AJAX 请求：后端返回数据，基本都是 JSON 格式（接口返回列表、用户信息、商品数据，就像咱刚才的组织架构树数据，后端可以返回 JSON）
2. localStorage 本地存储：只能存字符串，JS 对象存本地，必须转 JSON 字符串
3. 配置文件：项目里package.json就是 JSON
4. 接口 Mock、ApiPost 调试，大部分接口返回 JSON

3. JSON 语法规则（重点，新手最容易踩坑）

JSON 本质就是一段字符串，长得像 JS 对象，但有严格限制！ ✅ JSON 要求：

1. 属性名（key）必须用双引号"，不能单引号，不能不写引号
2. 字符串值，也必须双引号
3. 只能写这几种数据：对象{}、数组[]、数字、字符串、true/false、null ❌ JSON不能：

• 写注释（//、/* */都不行！很多新手踩坑）
• 写undefined、函数
• key 用单引号、不带引号

// ✅合法JSON { "name": "技术部", "children": [ {"name":"前端组"} ] }

// ❌这是JS对象，不是JSON！ let obj = { name:"技术部", // key没有双引号 msg:'单引号字符串' // 单引号，JSON不认 }

4. JS 里操作 JSON 的两个核心 API（就 2 个！）

JSON 字符串 ↔ JS 对象

1. JSON.parse( json字符串 )：解析。把 JSON 文本 → JS 对象（前端拿到后端返回数据，用这个）
2. JSON.stringify( js对象 )：序列化。把 JS 对象 → JSON 字符串（传给后端，或者存 localStorage）

// 示例 // 1. 一段JSON字符串（网络拿到的就是这种文本） let jsonStr = `{ "name": "张三", "age": 20 }` // 2. JSON字符串转JS对象，前端直接读取属性 let userObj = JSON.parse(jsonStr) console.log(userObj.name) // 3. JS对象转JSON字符串 let person = {name:"李四",age:22} let str = JSON.stringify(person) console.log(str)

类比理解： JSON 字符串 = 纸质写的单据（只能看，不能直接操作） JS 对象 = JS 内存里的对象，可以随便读取修改parse：把纸上文字录入电脑变成对象stringify：把电脑对象打印成纸质单据文本