JSON 数据格式详解

在现代 Web 开发中，数据交换是至关重要的一部分。而 JSON (JavaScript Object Notation) 已被广泛用于此。本文将详细介绍 JSON 的格式以及如何使用它进行数据交换。

什么是 JSON

JSON 是一种文本格式，它是由 JavaScript 对象表示法衍生而来。JSON 是轻量级的数据交换格式，易于阅读和编写，同时也易于解析和生成。JSON 格式具备与数据结构无关的属性，这是一种便于传输和解析的格式。JSON 在 Web 应用程序中用于服务器和客户端之间的数据传递。它已成为一种标准格式，并被广泛使用。

JSON 结构

JSON 数据由键值对构成，其中键表示属性名而值则表示相关联的属性值，键值对用冒号 : 分隔，多个键值对用逗号 , 分隔，整个键值对被大括号 {} 包裹，形如以下代码：

{'name': 'John', 'age': 30, 'city': 'New York'}

值得注意的是，每个键值对中的键必须是字符串，而值则可以是字符串、数字、布尔值、对象、数组，甚至也可以是 null。大括号 {} 中的键值对可以嵌套着其他 key-value 对象形式，也就是我们常见的 JSON 对象嵌套的形式。

JSON 也可以是一个数组，这是由方括号 [] 括起来的一组值列表，每个值之间用逗号 , 分隔。数组既可以包含简单的数据类型，也可以包含其他数组。以下是一个 JSON 数组的示例：

[
    {
        "name": "John",
        "age": 30,
        "city": "New York"
    },
    {
        "name": "Tom",
        "age": 25,
        "city": "Boston"
    }
]

JSON 示例

示例 1：简单的 JSON 对象

以下是宠物店卖出一只猫的信息：

{
    "petName": "Fluffy",
    "petType": "Cat",
    "petAge": 2,
    "petSex": "female",
    "petPrice": 1000.0
}

在这个例子中，我们可以看到这个 JSON 对象包括了这只猫的名字、品种、年龄、性别和价格。其中键都是字符串，值则有字符串、数字和浮点数。

示例 2：JSON 数组

以下是一个包含了多个城市天气预报的 JSON 数组的示例：

[
    {
        "city": "New York",
        "temperature": 15,
        "weather": "Sunny"
    },
    {
        "city": "London",
        "temperature": 10,
        "weather": "Rainy"
    },
    {
        "city": "Paris",
        "temperature": 18,
        "weather": "Cloudy"
    }
]

在这个例子中，我们可以看到这个 JSON 数组是由三个 JSON 对象组成的。每个 JSON 对象代表了一个城市的天气预报，包括了这个城市的名字、温度和天气情况。

如何使用 JSON

在 JavaScript 中使用 JSON

如果您使用的是 JavaScript，可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象，使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。

以下是 JSON.parse() 和 JSON.stringify() 方法的示例：

<head>
    <script>
        var jsonStr = '{"name":"John","age":30,"city":"New York"}';
        var obj = JSON.parse(jsonStr);
        console.log(obj.name); // 打印 'John'

        var obj2 = {name: 'Tom', age: 25, city: 'Boston'};
        var jsonStr2 = JSON.stringify(obj2);
        console.log(jsonStr2); // 打印 '{"name":"Tom","age":25,"city":"Boston"}'
    </script>
</head>

在这个例子中，我们将一个 JSON 字符串 { "name": "John", "age": 30, "city": "New York" } 转换为一个 JavaScript 对象。我们使用 JSON.parse() 将字符串解析成一个对象，并使用 console.log() 打印出该对象的 name 属性。接着，我们将一个 JavaScript 对象 { name: 'Tom', age: 25, city: 'Boston' } 转换为一个 JSON 字符串错误的示例 JSON.stringify() 返回了undefined。

服务端返回的 JSON

Web 开发中，我们经常需要从服务端获取 JSON 数据。这些数据可以通过 AJAX 从服务器端获取，并通过 JSON.parse() 方法解析成 JavaScript 对象进行处理。以下是使用 jQuery 发送 AJAX 请求获取 JSON 数据并解析的简单示例：

<head>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <div id="myData"></div>
    <script>
        $.ajax({
            url: 'https://api.mydomain.com/data',
            type: 'get',
            dataType: 'json',
            success: function(data) {
                console.log(data);
                $('#myData').text(JSON.stringify(data));
            },
            error: function() {
                console.log('Error occured');
            }
        });
    </script>
</body>

在这个例子中，我们使用 jQuery 的 $.ajax() 方法向服务器端发起了一个 GET 请求，获取 JSON 数据。服务器响应的数据类型是 JSON，所以我们需要设置 dataType 参数以便 jQuery 自动解析响应数据。在响应成功后，我们将 JSON 数据通过 JSON.stringify() 方法转换为字符串，并将其显示在页面中。