网站导航
> 文章列表 > JavaScript基础05 - JSON

JavaScript基础05 - JSON

网友: 文章列表 2024-03-21 19:50:11

JavaScript基础05 - JSON

JavaScript基础05

  • students.xml
  • 001
  • 002
  • 003-eval函数
  • 004

students.xml

<?xml version="1.0" encoding="GBK"?><!--HTML和XML有一个父亲：SGML（标准通用的标记语言。）HTML主要做页面展示：所以语法松散。很随意。XML主要做数据存储和数据描述的：所以语法相当
--><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>

001

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JSON</title></head><body><script type="text/javascript">/*1、什么是JSON，有什么用？JavaScript Object Notation （JavaScript对象标记），简称JSON。（数据交换格式）JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON的。）2、JSON是一种标准的轻量级的数据交换格式。特点是：体积小、易解析。3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。XML体积较大，解析麻烦，但是有其优点是，语法严谨。（通常银行相关的系统之间进行数据交换的话会使用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(stu.sno + "，" + stu.sname + "," + stu.sex);}</script></body>
</html>

002

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>复杂一些的JSON对象</title></head><body><script type="text/javascript">var user = {"usercode" : 110,"username" : "张三","sex" : true,"address" : {"city" : "北京","street" : "大兴区","zipcode" : "1221",},"aihao" : ["smoke","drink","tt"]};// 访问人名以及居住的城市alert(user.username + "居住在" + user.address.city)/*请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每个学生的信息，以及总人数信息。*/var jsonData = {"total" : 3,"students" : [{"name" : "张三","birth" : "1980-10-20"},{"name" : "李四","birth" : "1981-10-20"},{"name" : "王五","birth" : "1982-10-20"},]};</script></body>
</html>

003-eval函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>eval函数</title></head><body><!--JSON是一种行业内的数据交换格式标准。JSON在JS中以JS对象的形式存在。--><script type="text/javascript">/*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":""};*/var json = {"username" : "zhangsan"};// JS中访问json对象的属性alert(json.username);// JS中访问json对象的属性alert(json["username"]);</script></body></html>

004

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>设置table的tbody</title></head><body><script type="text/javascript">// 有这些json数据var data = {"total" : 4,"emps" : [{"empno":7369,"ename":"SMITH","sal":800.0},{"empno":7380,"ename":"SMITH2","sal":800.0},{"empno":7381,"ename":"SMITH3","sal":800.0},{"empno":7399,"ename":"SMITH4","sal":800.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><td>员工编号</td><td>员工名字</td><td>员工薪资</td></tr><tbody id="emptbody"><!--<tr><td>7369</td><td>SMITH</td><td>800.0</td></tr><tr><td>7369</td><td>SMITH</td><td>800.0</td></tr><tr><td>7369</td><td>SMITH</td><td>800.0</td></tr>--></tbody></table>总共<span id="count">0</span>条数</body>
</html>
网络标签：

相关问题