JSON(JavaScript Object Notation）

最新推荐文章于 2022-03-24 19:29:31 发布

静之若安浮之若失

最新推荐文章于 2022-03-24 19:29:31 发布

阅读量410

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： JSON

本文链接：https://blog.youkuaiyun.com/qq_41141896/article/details/93532943

html 专栏收录该内容

5 篇文章

订阅专栏

JSON是一种轻量级的数据交换格式，基于ECMAScript规范的子集，用于存储和表示独立于编程语言的数据。它的层次结构清晰，易于阅读和编写，也便于机器解析和生成，提升了网络数据传输效率。JSON解析关键点包括使用JSON.parse()方法将JSON字符串转换为JSON对象，以及处理JSON的嵌套结构和原始格式要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

<!--JSON对象-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
			//如何定义JSON对象{'键名':值,键名2':值2};
			var stuJSON={'name':'张三','age':23,'sex':true};
			 //取数据:方式1:键找值
			 var name=stuJSON.name;
			 alert(name);
			 alert(stuJSON.age);
			 alert(stuJSON.sex);
			 //方式2:
			var name2=stuJSON['name'];
			alert(name2)
			alert("下面的")
			//如何遍历JSON对象
			for(key in stuJSON){
				alert(stuJSON[key]);
			}
				alert("下面的数组")
			//遍历数组 for in 
			var arr=["aaa","bbbb","cccc","dddd"];
			for(index in arr){
				alert(arr[index]);
			}
			// String stu="{'name':'张三','age':23,'sex':true}"		
		</script>
	</head>
	<body>
	</body>
</html>

JSON解析

//JSON语法的严谨格式,不要格式化,紧凑风格,键值对不要有换行空格

JSON.parse()这个方法,/把JSON字符串解析成JSON对象，在解析JSON字符串时,注意JSON字符串要原始格式(JSON字符串没有换行和空格)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0" width="300px" height="200px">
			<tr>
				<td id="td1">Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
		<script type="text/javascript">	
			var jsonStr =
				'{"code":200,"msg":"成功!","data":{"yesterday":{"date":"18日星期二","high":"高温 27℃","fx":"无持续风向","low":"低温 20℃","fl":"\u003c![CDATA[\u003c3级]]\u003e","type":"阴"},"city":"成都","aqi":null,"forecast":[{"date":"19日星期三","high":"高温 27℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 20℃","fengxiang":"无持续风向","type":"多云"},{"date":"20日星期四","high":"高温 30℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 22℃","fengxiang":"无持续风向","type":"多云"},{"date":"21日星期五","high":"高温 29℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 21℃","fengxiang":"无持续风向","type":"阵雨"},{"date":"22日星期六","high":"高温 26℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"},{"date":"23日星期天","high":"高温 23℃","fengli":"\u003c![CDATA[\u003c3级]]\u003e","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"}],"ganmao":"各项气象条件适宜，无明显降温过程，发生感冒机率较低。","wendu":"26"}}'
			var obj = JSON.parse(jsonStr); //JSON.parse()这个方法,在解析JSON字符串时,注意JSON字符串要原始格式(JSON字符串没有换行和空格)
			//alert(obj);
			var sonJSON=obj.data.yesterday;
		     //sonJSON.date
			// document.getElementById("td1").innerText=sonJSON.date;
			var tds=document.getElementsByTagName("td");
			var keyarr=new Array();
			for(key in sonJSON){
				keyarr.push(key);
			}
			//alert(keyarr);
			// for(var i=0;i<tds.length;i++){
			// 	tds[i].innerText=sonJSON.keyarr[i];
			// }
			
			for(index in tds){
				//alert(index);
				tds[index].innerText=sonJSON[keyarr[index]];
			}
		</script>
	</body>
</html>

JSON嵌套

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var json = {
				name: '张三',
				age: '23',
				data: {
					sonname: 'sonson',
					sonage: 100,
				},
				arr:[10,30,40],
				method:function(){
					alert("abc");
				},
				//ES6的语法
				test(){
					alert("test");
				},
				// test:function(){ 上面不简写
				// 	 
				// }
			};
			//取sonson
			// var name=json.data.sonname;
			// alert(name);
			// var v=json.arr
			// var num=v[2];
			// alert(num);
			// json.method();
			// json.test();
			//还有一种封装形式 数组的元素放的是JSON对象
			var jsonArr=[{'name':'张三',age:23},{'name':'李四',age:24},{'name':'王五',age:25}];
			//var v=jsonArr[0].name;
			//alert(v);
			for(index in jsonArr){
				var obj=jsonArr[index];
				for(key in obj){
					alert(key+"==="+obj[key]);
				}
			}	
		</script>
	</head>
	<body>
	</body>
</html>

JSON对象和JSON字符串的互转

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// { "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
			// 
			// 我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：
			//外面是单引号 注意:单引号括JSON对象,就变成JSON字符串
			var str='{"name":"runoob", "alexa":10000, "site":"www.runoob.com"}'
			var obj = JSON.parse(str); //把JSON字符串解析成JSON对象
			alert(obj.name);		
			var loginJSON={"username":"zhangsan","password":"123456"};
			
        	var jsonString=JSON.stringify(loginJSON); //把JSON对象变成JSON字符串
			alert(jsonString);
			alert(typeof jsonString);
		</script>
	</head>
	<body>
	</body>
</html>