JS—JSON的使用

new麻油叶先生

已于 2023-01-27 22:56:30 修改

阅读量1.2k

点赞数

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

于 2023-01-27 22:52:19 首次发布

本文链接：https://blog.csdn.net/boilll/article/details/128771453

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是JSON?

1、什么是JSON，有什么用?
JavaScript Obiect Notation (JavaScript对象标记)，简称JSON。(数据交换格式)

JSON主要的作用是:一种标准的数据交换格式。(目前非常流行，99%以上的系统，系统A 与系统B交换数据的话，都是采用JSON。)

2、JSON是一种标准的轻量级的数据交换格式。特点是:体积小，易解析。
在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。

3、XML体积较大，解析麻烦，但是有其优点是，语法严谨。(通常银行相关的系统之间进行数据交换的适会使用XML。)

简单使用

JSON数组是外层是数组，元素是JSON

复杂一些的JSON

eval函数(非常重要)

作用：将一段字符串当做JS代码来解释并执行。

第一句就相当于：var i = 100;效果一模一样

java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器，也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串”,还不是一个json对象可以使用eval函数将json格式的字符串转换成json对象。

给表单添加数据

需求：点击按钮把从后台传过来的数据显示在表格，如下

HTML代码

<input type="button" value="显示所有员工信息" id="displayBtn">
<table width = 50%; border = 1px">
	<tr>
		<th>编号</th>
		<th>姓名</th>
		<th>薪资</th>
	</tr>
	<tbody id="emp_tbody">
	</tbody>
</table>
<p id="emp_total">总人工数:0</p>

JS代码

<body>
		<script type="text/javascript">
			//模拟java传过来的json数据
			var emp_data = {
				"total" : 3,
				"emps" : [
					{"empno":001,"ename":"Kerry",sal:8000},
					{"empno":002,"ename":"Curry",sal:7000},
					{"empno":003,"ename":"KD",sal:9000}
				]
			};
			
			//希望点击按钮把上面的数据放到下面的表格中
			window.onload = function(){
				var displayBtnElt = document.getElementById("displayBtn");
				displayBtnElt.onclick = function(){
					var emps = emp_data.emps;
					var html = "";
					for(var i = 0; i<emps.length; i++){
						var emp = emps[i];
						//每循环一次拼接一行html代码
						html +="<tr>";
						html += "<td>" + emp.empno + "</td>";
						html += "<td>"+emp.ename+"</td>";
						html += "<td>"+emp.sal+"</td>";
						html += "</tr>";
					}
					//循环结束后变量html已经拼接完了所有的员工信息
					//把它放到tbody中
					document.getElementById("emp_tbody").innerHTML = html;
					document.getElementById("emp_total").innerText = "总人数:"+emp_data.total;
				}
			}
		</script>
		
	</body>