JSON-标准的数据交换格式

Dear 丶 2023-10-08 17:04 39阅读 0赞

#### 文章目录 ####

*  一、JSON概述
 *  二、复杂的JSON对象
 *  三、JSON-eval函数
 *  四、把JSON数据渲染到表格中

## 一、JSON概述 ##

1、什么是JSON，有什么用？

**JSON是一种行业内的数据交换格式标准**  
      **JSON在JS中以JS对象的形式存在**  
      JavaScript Object Notation(JavaScript对象标记)，简称JSON。（数据交换格式）  
      JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，**系统A与系统B交换数据的话，都是采用JSON**。）

2、JSON是一种标准的轻量级的数据交换格式。特点是：

**体积小，易解析**。

3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一种是XML

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

4、JSON的语法格式：  
    var jsonObj = \{  
      “属性名” ： “属性值”，  
      “属性名” ： “属性值”，  
      “属性名” ： “属性值”，  
      “属性名” ： “属性值”，  
      “属性名” ： “属性值”  
    \};

**示例代码：**

<body>
    		<script type="text/javascript">
    		//创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析)
    			var student = {
        
    				"sno" : "100",
    				"sname" : "zhagnsan",
    				"sex" : "男"
    			};
    			alert(student.sno + "," + student.sname + "," + student.sex);
    			//100,zhangsan,男
    
    			//JSON数组
    			var students = [
    				{
        "sno":100,"sname":"zhangsan","sex":"男"},
    				{
        "sno":120,"sname":"lisi","sex":"男"},
    				{
        "sno":130,"sname":"wangwu","sex":"男"}
    			];
    			
    			//遍历
    			for(var i=0;i<students.length;i++){
        
    				alert(students[i].sno + "," + students[i].sname + "," + students[i].sex);//100,zhangsan,男
                     //120,lisi,男
                     //130,wangwu,男
    			}
    		</script>
    	</body>

## 二、复杂的JSON对象 ##

<table> 
 <tbody> 
  <tr> 
   <td>JSON里面放JSON数组 </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>JSON里面放JSON对象 </td> 
  </tr> 
 </tbody> 
</table>

**示例代码：**

<body>
    		<script type="text/javascript">
    			var user = {
        
    				"usercode" : "100",
    				"username" : "zhangsan",
    				"sex" : "男",
    				"address" : {
        
    					"city" : "美国",
    					"street" : "纽约",
    					"zipcode" : "008"
    				},
    				"aihoa" : ["smoke","drink","tt"]
    			};
    			//访问人名以及居住的城市
    			alert(user.username + "居住在" + user.address.city);//zhangsan居住在美国
    			
    			/* 
    			  请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
    			 */
    			var jsonData = {
        
    				"total" : "3",
    				"students" : [
    					{
        username":"张三","brith":"1998-02-03"},
    					{
        username":"李四","brith":"1997-02-03"},
    					{
        username":"王五","brith":"1996-02-03"},
    				]
    			};
    		</script>
    	</body>

## 三、JSON-eval函数 ##

evaL函数的作用是：

<table> 
 <tbody> 
  <tr> 
   <td>将字符串当做一段JS代码解释并执行 </td> 
  </tr> 
 </tbody> 
</table>

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

面试题：  
      在JS代码当中：\{\}和\[\]有什么区别？  
        \[\]是数组。  
        \{\}是JSON

java中的数组：int\[\] arr = \{1,2,3,4,5\};  
       jS中的数组：var arr = \[1,2,3,4,5\];  
       JSON:var jsonObj = \{“emaiL”:“fawaikaungtu@123.com”,“age”:“25”\};

**示例代码：**

<body>
    		<script type="text/javascript">
    		window.eval("var i= 100");
    		alert("i = " + i);//i=100
    		
    		var fromJava = "{\"name\":\"zhangsan\",\"password\":\"admin123\"}";
    		//将以上的JSON格式的字符串转换成JSON对象
    		window.eval("var jsonObj = " + fromJava);
    		//访问json对象
    		alert(jsonObj.name + "," + jsonObj.password);//在前端获取数据
            //zhangsan,afmin123
            
            var JSON = {
        
    				"username":"zhangsan"
    			};
    		//在JS中访问json对象的属性
    		alert(JSON.username);//zhangsan
    		//在JS中访问json对象的属性
    		alert(JSON["username"]);//zhangsan

## 四、把JSON数据渲染到表格中 ##

**实现代码：**

<body>
    		<script type="text/javascript">
    			var Data = {
        
    				"total":4,
    				"emps":[
    					{
        "empno":"71180","empname":"张三","sal":"10000"},
    					{
        "empno":"71170","empname":"李四","sal":"20000"},
    					{
        "empno":"71160","empname":"王五","sal":"30000"},
    					{
        "empno":"71150","empname":"赵六","sal":"40000"}
    				]
    			};
    			
    			window.onload = function(){
        
    				document.getElementById("displayBtn").onclick = function(){
        
    					var emps = Data.emps;
    					var html = "";
    					//遍历输出JSON数据
    					for(var i=0;i<emps.length;i++){
        
    						var emp = emps[i];
    						html += "<tr>";
    						html += "<td>"+emp.empno+"</td>";
    						html += "<td>"+emp.empname+"</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" />
    		<h3>员工信息列表</h3>
    		<hr>
    		<table border="2px" width="50%">
    			          <tr>
    					  <td>员工编号</td>
    					  <td>员工名字</td>
    					  <td>员工薪资</td>
    			          </tr>
    			   <tbody id="emptbody">
    			   
    			      
    			   </tbody>
    		</table>
    		总共<span id="count">0</span>条数
    	</body>

![在这里插入图片描述][4d25dac918134554a230c0076d8dc0b1.png_pic_center]  
点击显示员工信息列表：

![在这里插入图片描述][466ccbef2d0f45d6bdf091bc1c86444d.png_pic_center]

[4d25dac918134554a230c0076d8dc0b1.png_pic_center]: https://img-blog.csdnimg.cn/4d25dac918134554a230c0076d8dc0b1.png#pic_center
[466ccbef2d0f45d6bdf091bc1c86444d.png_pic_center]: https://img-blog.csdnimg.cn/466ccbef2d0f45d6bdf091bc1c86444d.png#pic_center