JSON笔记

于 2022-09-17 21:25:42 发布
阅读量198 收藏
点赞数
分类专栏： js 文章标签： json javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ACBYCL/article/details/126906171
版权

一.访问JSON数据

1.普通访问—用.来访问

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>你可以使用点号（.）来访问 JSON 对象的值：</p>

<p id="demo"></p>

<script>

var myObj, x;
myObj = {
	"name":"runoob",
	"alexa":10000,
	"site":null
};
x = myObj.name;
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

2.用数组[string]来访问

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>你也可以使用中括号（[]）来访问 JOSN 对象的值：</p>

<p id="demo"></p>

<script>

var myObj, x;
myObj = myObj = {
	"name":"runoob",
	"alexa":10000, 
	"site":null
};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

二.循环访问

1.用for - in 来访问

注意：for - in–循环数组是打印的索引

<!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>
	<p id="demo"></p>

	<script>
		var myObj={
			"name":"runoob",
			"alexa":1000,
			"site":null
		}
		for(x in myObj){
			document.getElementById("demo").innerHTML+=x+"<br>"
		}

		for(x in myObj){
			console.log(x)
		}
	</script>
	

</body>
</html>

在这里插入图片描述

2.For-in-循环时，使用([])来访问属性

<!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>
	<p id="demo"></p>

	<script>
		var myObj={
			"name":"runoob",
			"alexa":1000,
			"site":null
		}
		for (x in myObj) {
			document.getElementById("demo").innerHTML += myObj[x] + "<br>";
		}
	</script>
	

</body>
</html>

在这里插入图片描述

三.嵌套JSON对象

JSON对象中可以包含另一个JSON对象
还可以嵌套：字符串，布尔值，数组，对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>访问 JSON 内嵌对象。</p>

<p id="demo"></p>

<script>
myObj = {
	"name":"runoob",
	"alexa":10000,
	"sites": {
		"site1":"www.runoob.com",
		"site2":"m.runoob.com",
		"site3":"c.runoob.com"
	}
}
document.getElementById("demo").innerHTML += myObj.sites.site1 + "<br>";
// 或者
document.getElementById("demo").innerHTML += myObj.sites["site1"];
</script>

</body>
</html>

在这里插入图片描述

四.修改值

1.使用.来修改JSON对象的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>修改 JSON 对象的值。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
myObj.sites.site1 = "www.google.com";

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

2.使用[…]来修改JSON对象的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>使用中括号([])来修改 JSON 对象的值。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
myObj.sites["site1"] = "www.google.com";

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

五.删除对象属性

1.使用delete关键字来删除JSON对象的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>删除 JSON 对象属性。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
delete myObj.sites.site1;

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

2.使用[…]来删除JSON对象的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>删除 JSON 对象属性。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
delete myObj.sites["site1"];

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

六.数组

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）

1.JSON对象中的数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>访问 JSON 对象数组值。</p>

<p id="demo"></p>

<script>

var myObj, x;
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
}
x = myObj.sites[0];
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

2.循环数组

1.使用for…in…来访问

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>你可以使用 for-in 来访问数组:</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

2.使用for循环

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>使用 for 循环访问数组:</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};

for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

3.嵌套JSON对象中的数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>使用 for 循环访问数组:</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};

for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

4.修改数组值

使用索引值来修改数组值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>修改 JSON 对象数组值。</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};
 myObj.sites[1] = "Github";

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

在这里插入图片描述

5.删除数组元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>删除数组元素</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};
delete myObj.sites[1];

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

7.JSON.parse()

JSON通常用于服务端交换数据。
在接受服务器数据时一般是字符串
使用JSON.parse()将数据转换为js对象
语法：

JSON.parse(text[, reviver])

参数说明：

  • text：一个有效的JSON字符串
  • reviver：一个转换结果的函数，将为对象的每个成员调用此函数

2.解析实例

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>从 JSON 对象中创建 JavaScript 对象</h2>

<p id="demo"></p>

<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>

</body>
</html>

在这里插入图片描述

3.从服务端接受JSON数据

使用AJAX从服务器请求JSON数据，并解析JS对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>

<p id="demo"></p>

<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

</script>

<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

在这里插入图片描述

4.异常

1.解析数据

JSON不能存储Date对象，需要将其转换为字符串，再将字符串转换为Date对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>将字符串转换为 Date 对象。</h2>

<p id="demo"></p>

<script>

var text = '{
	"name":"Runoob", 
	"initDate":"2013-12-14", 
	"site":"www.runoob.com"
}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);

document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

</script>

</body>
</html>

在这里插入图片描述
启用JSON parse的第二个参数reviver，一个转换结果的函数，对象的每个成员都调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>字符串转换为 Date 对象</h2>

<p id="demo"></p>

<script>

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
	if (key == "initDate") {
	    return new Date(value);
	} else {
	    return value;
}});

document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

</script>

</body>
</html>

在这里插入图片描述

2.解析函数

JSON不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转化为函数
不建议在JSON中使用函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>字符串转换为函数</h2>

<p id="demo"></p>

<script>

var text = '{ 
	"name":"Runoob", 
	"alexa":"function () {return 10000;}",
	"site":"www.runoob.com"
}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");

document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa(); 

</script>

</body>
</html>

在这里插入图片描述

8.JSON.stringify

向服务器发送数据。使用JSON.stringify()将js转换为字符串

语法：

  • value：要转换的js值（通常为对象和数组）
  • replacer：用于转换结果的函数或数组。
    如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

  • space： 文本添加缩进和空格。数字：用于缩进
    在这里插入图片描述
JSON.stringify(value[, replacer[, space]])

1.JS对象转换

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>将 JavaScript 对象转换为 JSON 字符串</h2>

<p id="demo"></p>

<script>

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

</body>
</html>

在这里插入图片描述

2.JS数组转化

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>将 JavaScript 数组转换为 JSON 对象</h2>

<p id="demo"></p>

<script>

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

</script>

</body>
</html>

在这里插入图片描述

3.异常

3.1 解析数据

JSON不能存储Date对象，stringfiy将所有日期转换为字符串，之后将字符串转换为Date对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JSON.stringify 将 Date 对象转换为字符串</h2>

<p id="demo"></p>

<script>

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

</body>
</html>

在这里插入图片描述

3.2解析函数

JSON不允许包含函数，stringify会删除js对象的函数，包括key和value

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JSON.stringify 将删除对象中的函数</h2>

<p id="demo"></p>

<script>

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

</body>
</html>

在这里插入图片描述
执行stringify函数前将函数转换为字符串来避免以上问题的发生：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JSON.stringify 将移除对象中的函数</h2>

<p>我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来保留函数。</p>

<p id="demo"></p>

<script>

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

</body>
</html>

在这里插入图片描述

9.JSON使用

1.把JSON文本转换为JS对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
网站名: <span id="name"></span><br> 
网站地址: <span id="url"></span><br> 
</p> 
<script>
var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

var obj = eval ("(" + txt + ")");

document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url 
</script>
</body>
</html>

在这里插入图片描述

2.JSON解析器

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
网站名: <span id="name"></span><br> 
网站地址: <span id="url"></span><br> 
</p> 
<script>
var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

obj = JSON.parse(txt);

document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url
</script>
</body>
</html>

在这里插入图片描述

ACBYCL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax&Json笔记
03-28
Ajax&Json笔记,非常适合新手入门学习
json字符串中，包含函数的处理
pengymly的专栏
12-12 5290
json字符串中，包含函数時，使用JSON.parse(strJSON)轉換時，定義的字符串函數被識別中普通的字符串。 比如：{"formate":"function test(){ return 1;}"} 可以使用JSON.parse(str,funReviver)中第二個參數funReviver 指定每個json對象，調用funReviver函數。 代碼如下： var str  ='
python json笔记
m0_51104427的博客
11-17 255
python json笔记 import json json.dumps()和json.loads() json.dumps()把字典转化为字符串，返回的是字符串；json.loads()则把字符串转化为字典，返回值的类型为字典。 # json.dumps() >>> json_info = {"age":"12"} >>> print(json.dumps(json_info)) '{"age": "12"}' >>> print(type(js
Json笔记
尽力而为
12-09 824
Json的一点心得，原来Json只是一种更适合JS的一种数据传输格式，看一下就明白基本的概念了。
java json笔记
zuiniao123的博客
03-26 162
1.json转实体类时，对于json中和java关键词冲突的，可以用@JsonProperty("json中的key") 或者 @SerializedName("json中的key")来注解，分别对应了Jackson和Gson这两个库。 ...
XML&JSON笔记.docx
09-15
XML&JSON笔记.docx
java JSON笔记
03-22
浏览器开发文档 博文链接：https://chenxiuheng.iteye.com/blog/1007607
json笔记 详细注释
09-12
json_笔记
Json学习笔记
03-22
Json学习笔记，你的必选哦，与大家共享，一起进步
json 入门学习笔记 示例代码
10-29
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。
JSON学习笔记
09-06
JSON入门学习笔记，对初学者很有帮助！
JSON学习笔记第1/2页
10-30
JSON我就要来了
json文档笔记
10-08
JSON即JavaScript Object Natation，它是一种轻量级的数据交换的文本格式。其作用是提供结构化数据的一种表示，而不依赖于所用的语言和平台。使用这种格式，可以在不同语言编写的应用程序之间交换数据，而且可以在...
JSON_ajax笔记1
08-08
JSON_ajax笔记1
JSON_ajax笔记2
08-08
JSON_ajax笔记2
JS基础学习笔记-JSON
最新发布
06-14
JS基础学习笔记-JSON
WCF返回JSON学习笔记
01-10
WCF，json
Ajax&Json学习笔记
08-01
Ajax，Json的学习笔记
microPython学习笔记5 json的解析
03-10
关于 microPython 学习笔记5 中 json 的解析问题，我可以回答您的问题。在 microPython 中，可以使用 ujson 模块来解析 json 数据。具体的使用方法可以参考相关的文档和教程。希望我的回答能够帮助到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值