- A+
楔子：
1、JavaScript Object Notation（JavaScript对象标记），简称JSON（数据交换格式）。
JSON主要的作用是：一种标准的数据交换格式（系统A与系统B交换数据）。
2、JSON是一种标准的轻量级的数据交换格式，具有体积小，易解析的特点。
3、在实际的开发中有两种使用最多的数据交换格式，，其一是JSON，另一个是XML。
XML体积较大，解析麻烦，但是优点是：语法严谨（通常银行相关的系统之间进行数据交换的话会使用XML）。
4、JSON的语法格式：
var jsonObj = {
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
};
//创建JSON对象（JSON也可以称为无类型对象，轻量级，轻巧，体积小，易解析）
一、JSON 初步：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSON 初步</title> </head> <body> <script type="text/javascript"> //创建JSON对象 var student = { "sno" : "123", "sname" : "张三", "sex" : "男" }; //访问JSON对象的属性 alert(student.sno + "," + student.sname + "," + student.sex); //JSON数组 var students = [ {"no":"001","name":"张伟","sex":"男","interest":"篮球"}, {"no":"002","name":"东方月初","sex":"男","interest":"耍无赖"}, {"no":"003","name":"王权霸业","sex":"男","interest":"练剑"}, {"no":"004","name":"王权富贵","sex":"男","interest":"成全"} ]; //遍历JSON数组中所有对象的属性 for(var i = 0;i<students.length;i++){ alert("编号："+students[i].no+","+"姓名："+students[i].name+","+"性别：" +students[i].sex+","+"兴趣："+students[i].interest); } </script> </body> </html>
二、复杂一些的 JSON 对象：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>复杂一些的JSON对象</title> </head> <body> <script type="text/javascript"> var user = { "usercode" : 001, "username" : "王狗蛋", "sex" : true, "address" : { "city" : "木叶村", "street" : "自来也路", "zipcode" : "00001", }, "interest" : ["搓丸子","吃拉面","看漫画"] }; // 访问人名以及居住的城市 alert(user.username + "居住在" + user.address.city); //访问user的全部兴趣 for(var i = 0;i < user.interest.length;i++){ alert(user.username+"的兴趣有："+user.interest[i]); } </script> </body> </html>
三、eval函数：
笔记：
1、eval 函数的作用：将字符串当做一段 JS 代码解释并执行。
2、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] ;
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>eval函数</title> </head> <body> <!-- JSON在JS中以JS对象的形式存在 --> <script type="text/javascript"> //这是java程序发过来的json格式的"字符串",破折号起到转义的作用 var fromJava = "{"name":"张三","password":"123"}"; //执行一句JS语句（将以上的json格式的字符串转换成json对象) window.eval("var jsonObj = " + fromJava); //JS中访问json对象属性的两种方式: alert(jsonObj.name); alert(jsonObj["name"]); </script> </body> </html>
四、模拟将数据库中的信息打印在页面的表格中：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进一步剖析JSON使用</title> </head> <body> <script type="text/javascript"> //数据（JSON对象）: var data = { "total" : 4, "emps" : [ {"empno":001,"ename":"SMITH","sal":8800.00}, {"empno":002,"ename":"JIM","sal":22800.00}, {"empno":003,"ename":"Amy","sal":35800.00}, {"empno":004,"ename":"DAMING","sal":24400.00} ] }; //设置按钮的点击事件（希望把数据展示到table中) window.onload = function(){ var displayBtnElt = document.getElementById("displayBtn"); displayBtnElt.onclick = function(){ var emps = data.emps; //一个空的字符串(准备装要执行的HTML代码) var html = ""; //每一次循环用于填充一行用户信息到表格里 for(var i = 0; i < emps.length; i++){ var emp = emps[i]; html += "<tr align = 'center'>"; html += "<td>"+emp.empno+"</td>"; html += "<td>"+emp.ename+"</td>"; html += "<td>"+emp.sal+"</td>"; html += "</tr>"; } //通过对“emptbody标签”的innerHTML属性的赋值,来执行一段HTMl代码 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"> <!-- 空空如也 --> </tbody> </table> <!-- 统计一下表格中有多少员工的信息 --> 总共<span id="count">0</span>条数 </body> </html>
