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>