JSON的介绍、形式、常用方法

最新推荐文章于 2024-05-29 17:38:35 发布

十八只兔

最新推荐文章于 2024-05-29 17:38:35 发布

阅读量886

点赞数

分类专栏：前后端数据交互 Javascript 文章标签： json javascript ajax

原文链接：https://www.imooc

版权

Javascript 同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

前后端数据交互

5 篇文章 0 订阅

订阅专栏

简介

JSON全称是JavaScript Object Notation，是Ajax发送和接收数据的一种格式；
JSON有3种形式，每种形式的写法都和JS中的数据类型很像，可以和JS中的数据类型互相转换

三种形式

1、简单值形式

概念：
（1）JSON的简单值形式对应着JS中的基础数据类型：数字、字符串、布尔值、null
（2）JSON中没有undefined值
（3）JSON中的字符串必须使用双引号，数字类型不用加双引号
（4）JSON中是不能注释的
文件目录如下：
JSON文件内容如下：

在这里插入图片描述

ajax读取json文件的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建xhr对象
        const xhr= new XMLHttpRequest();

        // 监听事件，处理响应
        xhr.onreadystatechange =()=>{
            // 不等于4，说明数据还没准备好
            if(xhr.readyState !==4){
                return;
            } 
            // 根据HTTP CODE 判断是否已经成功读取数据
            if ((xhr.status >= 200 && xhr.status < 300) ||xhr.status === 304){
                console.log(xhr.responseText);  // 获取数据的字符串形式
                console.log(typeof xhr.responseText);
            }
            
        };

        // 准备发送请求
        xhr.open('GET','./plain.json',true);
        // 调用send()正式发送请求
        xhr.send(null);
    </script>
</body>
</html>

运行结果：

2、对象形式

概念：
(1)JSON的对象形式对应着JS中的对象
(2)JSON中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号
(3)JSON中只要涉及到字符串，就必须使用双引号
(4)不支持undefined
对象形式json文件举例：

{
    "name":"张三",
    "age":19,
    "hobby":["足球","乒乓球"],
    "family":{
        "father":"张一",
        "mother":"李四"
    }
}

3、数组形式

概念:
(1)JSON的数组形式对应着JS中的数组
(2)不支持undefined。undefined不合法仍能获取到，是因为我们使用的是ajax,ajax没有和具体的数据格式绑定在一起,所以无论什么数据都能以字符串的形式获取到。但是如果数据不合法，解析的时候会解析不出来。
(3)只要涉及到字符串必须用双引号
数组形式json文件举例：

例1：

[1,"hi",null]

例2：

[
    {
        "id":1,
        "username":"张三",
        "comment":"yes"
    },
    {
        "id":2,
        "username":"李四",
        "comment":"no"
    }
]

JSON的常用方法

1、JSON.parse()

概念
（1）JSON.parse()可以将JSON格式的字符串解析成JS中的对应值
（2）一定要是合法的JSON字符串，否则会报错
代码：

// 监听事件，处理响应
xhr.onreadystatechange =()=>{
	// 不等于4，说明数据还没准备好
	if(xhr.readyState !==4){
		return;
	} 
	// 根据HTTP CODE 判断是否已经成功读取数据
	if ((xhr.status >= 200 && xhr.status < 300) ||xhr.status === 304){
		
		console.log(xhr.responseText);  // 获取数据的字符串形式
		console.log(typeof xhr.responseText);
		
		console.log(JSON.parse(xhr.responseText));
		console.log(JSON.parse(xhr.responseText).data);
	}	
};