JavaScript-JSON-老杜-笔记

yiersano

已于 2022-06-01 19:52:10 修改

阅读量211

点赞数

分类专栏： JavaScript 文章标签： json javascript

于 2022-06-01 17:23:41 首次发布

本文链接：https://blog.csdn.net/yiersano/article/details/125085432

版权

JavaScript 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

本文介绍了JSON作为轻量级数据交换格式的原理、优势，展示了如何创建和访问JSON对象，以及eval函数在处理JSON字符串和转换为对象中的作用。还涉及了如何将JSON数据动态展示在HTML table中。

摘要由CSDN通过智能技术生成

JSON

1、JSON

1、什么是JSON，有什么用？
	JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
	JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
2、JSON是一种标准的轻量级的数据交换格式。特点是：
	体积小，易解析。
3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
	XML体积较大，解析麻烦，但是有其优点是：语法严谨。
4、JSON的语法格式：
	var jsonObj = {
			"属性名" : 属性值,
			"属性名" : 属性值,
			"属性名" : 属性值,
			"属性名" : 属性值,
			....
	};
HTML和XML有一个父亲：SGML（标准通用的标记语言。） HTML主要做页面展示：所以语法松散。很随意。 XML主要做数据存储和数据描述的：所以语法相当严格。

<!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的时候,定义类,创建对象,访问对象的属性.
			Student = function(sno,sname,sex){
				this.sno = sno;
				this.sname = sname;
				this.sex = sex;
			}
			var stu = new Student(110,"张三","男");
			alert(stu.sno + "," + stu.sname + "," + stu.sex)
			
			// JSON数组
			var Students = [
				{"sno" : "110","sname" : "张三","sex" : "男"},
				{"sno" : "111","sname" : "李四","sex" : "男"},
				{"sno" : "112","sname" : "王五","sex" : "男"}
				];
			for(var i= 0 ; i < Students.length; i++){
				var stuObj = Students[i];
				alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex)
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var user = {
				"usercode" : 110,
				"username" : "张三",
				"sex" : "男",
				"address" : {"city" : "北京", "street" : "大兴区", "zipcode" : "12222"},
				"hobby" : ["smoke","drink","tt"]
			};
			
			// 访问人名以及居住的城市
			alert(user.username + user.address.city);
			
			/*
				请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
			*/
		   var  jsonData = {
			   "total" : 3;
			   students = [
			   	{"sno" : "110","sname" : "张三","sex" : "男"},
			   	{"sno" : "111","sname" : "李四","sex" : "男"},
			   	{"sno" : "112","sname" : "王五","sex" : "男"}
			   	];
		   }
		</script>
	</body>
</html>

2、eval函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>eval函数</title>
	</head>
	<body>
		<!--
			JSON是一种行业内的数据交换格式标准。
			JSON在JS中以JS对象的形式存在。
		-->
		<script type="text/javascript">
			/*
				eval函数的作用是：将字符串当做一段JS代码解释并执行。
			*/
		   /*
		   window.eval("var i = 100");
		   alert("i = " + i);
		   */
		  
		  // java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
		   // 也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
		   // 可以使用eval函数,将json格式的字符串转换成json对象.
		   var fromjava = "{\"name\":\"zhangsan\",\"password\":\"123\"}";
		   window.eval("var jsonObj = " + fromjava);
		   //访问json对象
		   alert(jsonObj.name + "," + jsonObj.password);
		   
		   /*
			面试题：
				在JS当中：[]和{}有什么区别？
					[] 是数组。
					{} 是JSON。
				
				java中的数组：int[] arr = {1,2,3,4,5};
				JS中的数组：var arr = [1,2,3,4,5];
				JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};
		   */
		  var json = {
			  "username" : "zhangsan"
		  }
		  // JS中访问json对象的属性
		  alert(json.username);
		  // JS中访问json对象的属性
		  alert(json["username"]);
		  
		</script>
	</body>
</html>

3、设置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.0</td>
				</tr>
				<tr>
					<td>7361</td>
					<td>SMITH2</td>
					<td>1800.0</td>
				</tr>
				<tr>
					<td>7360</td>
					<td>SMITH2</td>
					<td>2800.0</td>
				</tr>
				<tr>
					<td>7362</td>
					<td>SMITH3</td>
					<td>8800.0</td>
				</tr> -->
			</tbody>
		</table>
		总共<span id="count">0</span>条
	</body>
</html>