一、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>
点击显示员工信息列表：
