JSON-标准的数据交换格式

导读:本篇文章讲解 JSON-标准的数据交换格式,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、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对象

JSON里面放JSON数组
JSON里面放JSON对象

示例代码:

<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函数的作用是:

将字符串当做一段JS代码解释并执行

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">
			   
			      <!--<tr>
					  <td>71180</td>
					  <td>张三</td>
					  <td>10000</td>
			      </tr>
			      <tr>
					  <td>71170</td>
					  <td>李四</td>
					  <td>20000</td>
			      </tr>
				  <tr>
				  	  <td>71160</td>
				  	  <td>王五</td>
				  	  <td>30000</td>
				  </tr>
				  <tr>
				  	  <td>71150</td>
				  	  <td>赵六</td>
				  	  <td>40000</td>
				  </tr> -->
			   </tbody>
		</table>
		总共<span id="count">0</span>条数
	</body>

在这里插入图片描述
点击显示员工信息列表:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/94218.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!