JSON数据交换格式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ls_wifi/article/details/102583423

本文主要介绍了JSON（JavaScript Object Notation）的基本概念、作用、特点，对比了JSON与XML的区别，并给出了JSON语法示例，包括简单及复杂JSON对象的表示方式。

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

1、什么是JSON，有什么用？
           JavaScript Object Notation（JavaScript对象标记),简称JSON。(数据交换格式)
           JSON主要的作用是:一种标准的数据交换格式。(目前非常流行，%90以上的系统，系统A与系统B交换数据的话，都是采用JSON。)

           2、JSON是一种标准的轻量级的数据交换格式。特点是：
           体积小，易解析。
           3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
           XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）
           4、JSON的语法格式:
           var jsonObj={
               "属性名" :属性值,
               "属性名" :属性值,
               "属性名" :属性值,
               "属性名" :属性值,
               };

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON</title>
	</head>
	<body>
		<script type="text/javascript">
			//创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小，易解析。)
			
			var studentObj={
				"sno":"110",
				"sname":"张三",
				"sex":"男"
			};
			
			//访问JSON对象的属性
			alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex);
			
			//JSON数组
			var students=[
			{"sno":"110","sname":"张三","sex":"男"},
			{"sno":"120","sname":"李四","sex":"男"},
			{"sno":"130","sname":"王五","sex":"男"}
			];
			
			//遍历
			for(var i=0;i<students.length;i++){
				var stuObj=students[i];
				alert(stuObj.sno+","+stuObj.sname+","+stuObj.sex)
			}
		</script>
	</body>
</html>

2.复杂一些的JSON对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复杂一些的JSON对象</title>
	</head>
	<body>
		<script type="text/javascript">
			var user={
				"usercode":110,
				"username":"张三",
				"sex":true,
				"address":{
				"city":"北京",
				"street":"大兴区",
				"zipcode":"12212121",
				}, 
				"aihao":["smoke","drink","tt"]
			};
			//访问人名以及居住的城市
			alert(user.username+"居住在"+user.address.city);
		</script>
	</body>
</html>

3.eval函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>eval函数</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
			   eval函数的作用是：
				 将字符串当作一段JS代码解释并执行。
				 也可以使用eval函数，将json格式的字符串转换成json对象。
			 
			 面试题:
			   在JS当中: []和{}有什么区别？
			     []是数组
				 {}是JSON。
			 */
			window.eval("var i=100;");
			alert("i="+i);
		</script>
	</body>
</html>

4.设置table的tbody:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置table的tbody</title>
	</head>
	<body>
		<script type="text/javascript">
		//有这些json数据
			var data={
				"total":4,
				"emps":[
					{"empno":7369,"ename":"SMITH","sal":800.0},
					{"empno":7361,"ename":"SMITH2","sal":1800.0},
					{"empno":7360,"ename":"SMITH3","sal":2800.0},
					{"empno":7362,"ename":"SMITH4","sal":3800.0},
				]
			};
			
			//希望把数据展示到table当中
			window.onload=function(){
				var displayBtnElt=document.getElementById("displayBtn");
				displayBtnElt.onclick=function(){
					var emps=data.emps;
					var html="";
					for(var i=0;i<emps.length;i++){
						var emp=emps[i];
						html+="<tr>";
						html+="<td>"+emp.empno+"</td>";
						html+="<td>"+emp.ename+"</td>";
						html+="<td>"+emp.sal+"</td>";
						html+="</tr>";
					}
					document.getElementById("emptbody").innerHTML=html;
					document.getElementById("count").innerHTML=data.total;
				}
			}
		</script>
		<input type="button" value="显示员工信息列表" id="displayBtn" />
		<h2>员工信息列表</h2>
		<hr>
		<table border="1px" width="50%">
			<tr>
				<th>员工编号</th>
				<th>员工名字</th>
				<th>员工薪资</th>
			</tr>
			<tbody id="emptbody">
	<!-- 			<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr> -->
		</tbody>	
		</table>
		总共<span id="count">0</span>条数
	</body>
</html>

JS学习小结(五)