【JavaScript】笔记（7）--- JSON（对象的创建，访问对象属性等；eval函数；模拟将数据库中的信息打印在页面的表格中）
楔子：
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>