1、什么是JSON，有什么用？ 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 studentObj = { "sno" : "110", "sname" : "张三", "sex" : "男" }; // 访问JSON对象的属性 alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.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); } </script> </body>
复杂的json数据格式
<body> <script type="text/javascript"> var user = { "usercode" : 110, "username" : "张三", "sex" : true, "address" : { "city" : "北京", "street" : "大兴区", "zipcode" : "12212121", }, "aihao" : ["smoke","drink","tt"] }; // 访问人名以及居住的城市 alert(user.username + "居住在" + user.address.city); /*描述整个班级中每一个学生的信息，以及总人数信息。*/ var jsonData = { "total" : 3, "students" : [ {"name":"zhangsan","birth":"1980-10-20"}, {"name":"lisi","birth":"1981-10-20"}, {"name":"wangwu","birth":"1982-10-20"} ] }; </script> </body>
使用eval函数将获取的java字符串转化为json并解析
<body> <!--JSON是一种行业内的数据交换格式标准。JSON在JS中以JS对象的形式存在。--> <script type="text/javascript"> /*eval函数的作用是： 将字符串当做一段JS代码解释并执行 window.eval("var i = 100;"); alert("i = " + i); */ // 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); // 在前端取数据.</script> </body>
应用：解析json数据，将其更新到table上
<body> <script type="text/javascript"> // 有这些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} ] }; // 希望把数据展示到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; } } </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>