JSON基础

最新推荐文章于 2023-11-12 11:31:26 发布

快速达阵

最新推荐文章于 2023-11-12 11:31:26 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/weixin_43237071/article/details/104039718

版权

JSON 基础：

什么是JSON？
JSON 是 JavaScript Object Notation 的缩写。

Data Representative Form. 数据表格
Commonly used for API and Configs. 主要用于API(Rest API)和 Config 文件
Light Weight and Easy to read/write. 轻量级并且容易读写。
Integrates easily with Most Languages. 能够很容易地和多种语言整合。

JSON数据类型:

String. “Hello World”.
Numbers. 10, 18.
Booleans . true, false.
null
Array [ 1,2,3], [ “hello”, “world”]
Objects {“key”, “value”].

JSON 文件：
user.json:

[
	{
        "name": "Peter",
        "age": 28,
        "address": {
            "street": "5 main street",
            "city": "New York"
        }
    },
    {
        "name": "Marry",
        "age": 25,
        "address": {
            "street": "TangNing street",
            "city": "London"
        }
    }
]

我个人有两种方法来验证JSON 格式或文件：
1). Goto https://jsonlint.com/ 来验证。
2). 用 Visual Studio Code 编辑器来验证。
我个人觉得第二种更好用，可以指出哪行代码有问题。

JSON Rules:

用key/value 键值对，key value要用双引号.
必须要用特定的数据类型.
文件类型为json.
MIME type 为： “application/json”, for REST APIs.

JSON 与 javascript格式的区别：
Javascript 中的key不用双引号包裹。
JSON.parse() 此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹：
JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串。

有关parse() 和stringify()的详细用法就不在这里说明了，有太多的文章来说明他们。

How to get json file from server?
jsontest.html to get user.json file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                // Typical action to be performed when the document is ready:
                var response = JSON.parse(xhttp.responseText);
                console.log(response);
            }
        };
        xhttp.open("GET", "user.json", true);
        xhttp.send();
    </script>
</body>

</html>

load this html file, Chrome Console 中会出现如下错误，这是因为没有 Server 运行：
jsontest.html:21 Access to XMLHttpRequest at ‘file:///C:/code/learning/user.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

下载node.js
cd C:/code/learning
npm install -g live-server
live-server

jsontest.html console.log 将会打印出以下内容：
在这里插入图片描述