JavaScript部分内容5 — JSON编程

目录

概述

复杂一些的JSON对象

eval函数

面试题

设置table的tbody

---

概述

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

2、JSON是一种标准的轻量级的数据交换格式。特点是：
    体积小，易解析。

3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
    XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）

XML：

<?xml version="1.0" encoding="GBK"?>

<students>
	<student sno="110">
		<sname>张三</sname>
		<sex>男</sex>
	</student>
	<student sno="120">
		<sname>李四</sname>
		<sex>男</sex>
	</student>
	<student sno="130">
		<sname>王五</sname>
		<sex>男</sex>
	</student>
</students>

    HTML和XML有一个父亲：SGML（标准通用的标记语言。）
    HTML主要做页面展示：所以语法松散。很随意。
    XML主要做数据存储和数据描述的：所以语法相当严格。

4、JSON的语法格式：
    var jsonObj = {
        "属性名" : 属性值,
        "属性名" : 属性值,
        "属性名" : 属性值,
        "属性名" : 属性值,
        ....
    };

		   // 创建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("111","李四","男");
			alert(stu.sno + "," + stu.sname + "," + stu.sex);

JSON数组

			var students = [
				{"sno":"110","sname":"张三","sex":"男"},
				{"sno":"120","sname":"李四","sex":"男"},
				{"sno":"130","sname":"王五","sex":"男"}
			];
			
			// 遍历
			for(var i = 0; i < students.length; i++){
				var stuObj = students[i];
				alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
			}

复杂一些的JSON对象

			var user = {
				"usercode" : 110,
				"username" : "张三",
				"sex" : true,
				"address" : {
					"city" : "郑州",
					"street" : "桐柏南路",
					"zipcode" : "12212121",
				},
				"aihao" : ["sing","dance","rap","backetball"]
			};
			
			// 访问人名以及居住的城市
			alert(user.username + "居住在" + user.address.city);

需求：请自行设计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"}
				]
			};

---

eval函数

eval函数的作用是：
      将字符串当做一段JS代码解释并执行。

		   window.eval("var i = 100;");
		   alert("i = " + i); // i = 100

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

var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"
// 将以上的json格式的字符串转换成json对象
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"]);

---

设置table的tbody

			// 有这些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}
				]
			};

效果：

		<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>条数

希望把数据展示到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;
				}
			}