JS之JSON、eval函数：字符串当做一段JS代码解释并执行、parse函数、后端传字符串过来，如何转为JSON对象，前端如何展示后端传过来的数据

姓蔡小朋友

已于 2022-10-12 21:05:21 修改

阅读量348

点赞数

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

于 2022-09-01 15:32:30 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126643580

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、什么是JSON：

JavaScript Object Notation。
是一种标准的轻量级的数据交换格式，很常用。
JSON在JS中以对象的形式存在
体积小，易解析。
在实际开发中有两种数据交换格式：JSON、XML。XML体积大，语法严谨。
json对象是大括号，数组是中括号。

二、JSON语法格式：

创建JSON对象：

<script>
var jsonObj = {
					"属性名" : 属性值,如果是字符串，则属性值也要加""
					"属性名" : 属性值,
					"属性名" : 属性值,
					"属性名" : 属性值,
					....
				};
				//注意是大括号，中括号是数组
</script>

访问JSON对象的属性：

<script>
	方法一：
		jsonObj.属性名;
	方法二：
		jsonObj["属性名"]
</script>

设计JSON格式的数据：例子

<script>
			/*
				请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
			*/
		    var jsonData = {
				"total" : 3,
				"students" : [
					{"name":"zhangsan","birth":"1980-10-20"},
					{"name":"lisi","birth":"1981-10-20"},
					{"name":"wangwu","birth":"1982-10-20"}
				]
			};
</script>

三、eval函数：

eval函数的作用是：
将字符串当做一段JS代码解释并执行， 用于将后端传来的字符串转成json对象。
类比innerHTML，innerHTML是把字符串当做HTML代码解释并执行。
用法：

<script>
		   // java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
		   // 也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
		   // 可以使用eval函数,将json格式的字符串转换成json对象.
		   var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"，\的作用是转义字符，因为和最外面的双引号冲突了
		   // 将以上的json格式的字符串转换成json对象，等同于执行var jsonObj = {"name":"zhangsan","password":"123"};
		   window.eval("var jsonObj = " + fromJava);
		   // 访问json对象
		   alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.
</script>

四、parse函数：

JSON.parse函数的作用：
将json格式的字符串转换为json对象.
用法：

<script>
		   var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"，\的作用是转义字符，因为和最外面的双引号冲突了
		   // 将以上的json格式的字符串转换成json对象，等同于执行var jsonObj = {"name":"zhangsan","password":"123"};
		   var jsonobj = JSON.parse(fromJava);
		   // 访问json对象
		   alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.
</script>

五、如何展示json对象的内容：

以下代码的作用：
用户点击按钮，可以将JSON对象data中的数据展示到web页面。
注意：json对象是大括号，数组是中括号。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置table的tbody</title>
	</head>
	<body>
		<script type="text/javascript">
			// 有这些json数据，设此对象为后端传来的字符串已经经过eval函数转成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>