JSON初探：解锁Web开发的通用语言

一、什么是 JSON ？

二、为什么要使用 JSON？ 

三、JSON的基本语法

四、JSON的数据类型

五、JSON的应用场景

1、前后端数据传输

2、API交互 

3、配置文件

4、数据库存储

六、json格式化工具

七、JSON 使用方法

1. 在JavaScript中使用JSON

 2. 通过AJAX或fetch进行数据交互

3. 在Python中使用JSON 

🥳一、什么是 JSON ？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）是一种轻量级的、基于文本的、开放的数据交换（数据交换是指，两个设备之间建立连接并互相传递数据的过程）格式。是一种纯字符串形式的数据，它本身不提供任何方法（函数），非常适合在网络中进行传输。

它主要包括两种结构：

• 对象（Object）：由一对大括号包裹，内部包含键值对（key-value pair）。
• 数组（Array）：由一对方括号包裹，内部可以包含多个元素，元素之间用逗号分隔。

🥳二、为什么要使用 JSON？ 

        JSON 和 XML 都可用于互联网数据传输，使用 JSON 主要有以下原因：一是与 JavaScript 紧密相关，JavaScript 是 Web 开发关键技术，JSON 基于 JavaScript 子集，JavaScript 支持 JSON。二是 JSON 结构简单紧凑，相比 XML 更利于程序员编辑阅读，XML 较复杂；三是 JSON 解析速度更快，存储同样数据时所占空间更小，因 XML 类似 HTML，解析大型文件会消耗额外内存；四是 JSON 结构的可读性高。

🥳三、JSON的基本语法

JSON的基本语法非常简单，主要包括两种结构：对象（Object）和数组（Array）。

1、对象（Object）：由一对大括号 {} 包裹，包含多个键值对（key-value）。每个键值对之间用逗号 , 分隔。例如：

{
  "name": "Alice",
  "age": 25,
  "isStudent": true
}

2、数组（Array）：由一对方括号 [] 包裹，里面可以存储多个值，值之间用逗号分隔。例如：

["apple", "banana", "cherry"]

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array），它们是可以嵌套。 

🥳四、JSON的数据类型

和js一样

• 字符串（String）：如 "Hello"
• 数字（Number）：如 25
• 布尔值（Boolean）：如 true 或 false
• 数组（Array）：如 ["apple", "banana"]
• 对象（Object）：如 {"name": "Alice", "age": 25}
• null：表示空值。

🥳五、JSON的应用场景

1、前后端数据传输

        在现代Web开发中，前端和后端的交流主要是通过HTTP请求来完成的，常见的做法是，前端请求的数据是JSON格式的，而后端返回的数据也是JSON格式。

例子： 假设你正在使用一个在线购物网站，点击“查看购物车”时，前端向后端发送请求，后端返回用户的购物车信息。

        前端请求：当你点击查看购物车时，前端会向后端发送一个GET请求，请求购物车数据。请求会以JSON格式发送。

fetch('/api/cart', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())  // 解析JSON响应
.then(data => {
  console.log(data);  // 处理返回的购物车数据
})
.catch(error => console.error('Error:', error));

        后端响应：后端收到请求后，查询数据库，获取用户的购物车信息，生成一个JSON响应，返回给前端。

{
  "cart": [
    {
      "productId": 1,
      "productName": "Laptop",
      "quantity": 1,
      "price": 1000
    },
    {
      "productId": 2,
      "productName": "Phone",
      "quantity": 2,
      "price": 500
    }
  ],
  "totalPrice": 2000
}

2、API交互 

        很多第三方服务提供API接口，供开发者获取数据。这些API接口返回的数据格式大多是JSON，前端可以直接解析和使用。

3、配置文件

        许多开发工具或框架（如Node.js、React等）使用JSON格式的配置文件来存储设置参数。这些配置文件通常不涉及数据交换，而是存储应用的配置信息，方便程序读取。

例子： 以Node.js项目为例，package.json文件是一个标准的JSON文件，用于存储项目的配置信息，比如项目名称、版本、依赖项等。

package.json 配置文件：

{
  "name": "my-node-project",
  "version": "1.0.0",
  "description": "A simple Node.js project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

4、数据库存储

        一些NoSQL数据库（如MongoDB）使用JSON格式（或BSON格式，二进制JSON）来存储数据。每条记录都是一个JSON对象，结构灵活，方便存储和查询。 

例子： 假设你正在开发一个用户管理系统，用户数据需要存储在数据库中。MongoDB是一个NoSQL数据库，它使用JSON格式来存储每个用户的信息。

存储在数据库中的JSON数据：

{
  "_id": "605c72ef1532071a8f4e4c7c",
  "name": "John Doe",
  "email": "johndoe@example.com",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA",
    "zip": "12345"
  }
}

🥳六、json格式化工具

JSON 在线解析 | 菜鸟工具

🥳七、JSON 使用方法

1. 在JavaScript中使用JSON

在JavaScript中，JSON经常与fetch、AJAX一起用于前后端数据交换。JSON的两大核心方法是：JSON.parse() 和 JSON.stringify()。

• JSON.parse()：将JSON字符串解析为JavaScript对象。用于将从服务器获取的JSON格式的响应转换成JavaScript对象。
• JSON.stringify()：将JavaScript对象转换为JSON字符串。用于将JavaScript对象转化为JSON格式的字符串，通常用于将数据发送到服务器。

// JSON字符串
let jsonString = '{"name": "Alice", "age": 25, "isStudent": true}';

// 将JSON字符串转换为JavaScript对象
let jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name);  // 输出: Alice

// 将JavaScript对象转换为JSON字符串
let newJsonString = JSON.stringify(jsonObject);
console.log(newJsonString);  // 输出: {"name":"Alice","age":25,"isStudent":true}

 2. 通过AJAX或fetch进行数据交互

通常，前端使用AJAX或fetch请求后端，后端返回JSON数据，前端再解析这些数据并更新页面。

 示例：使用$.ajax()获取用户数据

<script>
        // 发送AJAX请求
        $.ajax({
            url: "/api/user",  // 请求的URL
            type: "GET",       // 请求方法
            data: {},          // 请求参数，GET请求通常不需要发送数据
            success: function(response) {
                // 请求成功时的回调函数
                console.log("数据获取成功:", response);
                // 假设返回的数据格式如下：
                // { "name": "Alice", "age": 25 }
                var userInfo = "Name: " + response.name + "<br>Age: " + response.age;
                // 将获取到的数据插入到页面中
                $("#user-info").html(userInfo);
            },
            error: function() {
                // 请求失败时的回调函数
                console.error("请求失败");
                $("#user-info").html("无法获取用户数据。");
            }
        });
    </script>

• 当请求成功时，success回调函数会被触发，response参数包含服务器返回的数据。
• 假设返回的数据是一个包含用户信息的JSON对象（例如：{ "name": "Alice", "age": 25 }），我们将这些数据通过$("#user-info").html(userInfo)插入到页面中，显示用户的姓名和年龄。

3. 在Python中使用JSON

在Python中，我们可以通过内置的json模块来解析和生成JSON数据。

• json.loads()：将JSON字符串转换为Python对象（字典、列表等）。
• json.dumps()：将Python对象转换为JSON字符串。

import json

# JSON字符串
json_string = '{"name": "Alice", "age": 25, "isStudent": true}'

# 将JSON字符串解析为Python字典
data = json.loads(json_string)
print(data["name"])  # 输出: Alice

# 将Python字典转换为JSON字符串
json_data = json.dumps(data)
print(json_data)  # 输出: {"name": "Alice", "age": 25, "isStudent": true}