一.JSON
1.什么是JSON？有什么用？
JavaScript Object Notation（对象标记），是一种标准的轻量级的数据交换格式，在JS中以JS对象的形式存在。
JSON最主要的作用是进行数据交换：它是一种标准的数据交换格式（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON）
2.特点：体积小，易解析
3.XML和JSON
在实际的开发中有两种数据交换格式使用最多，其一是JSON，另一个是XML
①XML体积较大，解析麻烦，但是语法相当严谨（通常银行相关的系统之间进行数据交换的时候会使用XML）
②HTML和XML有一个父亲：SGML(标准通用的标记语言)
③HTML主要做页面展示：所以语法松散，很随意
XML主要做数据存储和数据描述：所以语法相当严格
使用JSON
<!DOCTYPE html>
<html>
<head>
<title>JSON</title>
</head>
<body>
<script type="text/javascript">
//创建JSON对象(JSON也可以被称为无类型对象)
var studentObj = {
"sno" : "110",
"sname" : "张三",
"sex" : "男"
}
//访问JSON对象的属性
alert(studentObj.sno);
//创建JSON数组
var students = [
{
"sno":"110","sname":"张三","sex":"男"},
{
"sno":"120","sname":"李四","sex":"男"},
{
"sno":"130","sname":"王五","sex":"男"},
];
//遍历
for(var i = 0;i < students.length;i++){
alert(students[i].sno);
}
//之前没用JSON的时候，我们都用类来完成此功能
Student = function(sno,sname,sex){
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
var stu = new Student("111","李四","男");
</script>
</body>
</html>
二.复杂一点的JSON对象
<!DOCTYPE html>
<html>
<head>
<title>复杂一些的JSON对象</title>
</head>
<body>
<script type="text/javascript">
var user = {
"userCode" : 110,
"userName" : "张三",
"sex" : true,
"address" : {
"city" : "山东",
"street" : "泰安",
},
"aihao" : ["smoke","drink","tt"]
}
alert(user.address.city);
var jsonData = {
"total" : 3,
"students" : [
{
},
{
}
]
}
</script>
</body>
</html>
三.eval函数
<!DOCTYPE html>
<html>
<head>
<title>eval函数</title>
</head>
<body>
<script type="text/javascript">
/*eval函数的作用是：
把字符串当作一段JS代码解释并执行*/
window.eval("var i = 100");
alert(i);
//java连接数据库，查询数据之后，将数据在java程序中拼接成JSON格式的“字符串”，将json格式的字符串响应到浏览器
//也就是说java响应到浏览器上的仅仅是一个“JSON格式的字符串”，还不是一个json对象
//此时可以使用eval函数，将json格式的字符串转换成json对象
var fromJava = "{\"name\":\"张三\"}";//这是java程序给发过来的json格式的字符串
window.eval("var jsonObj = " + fromJava);
alert(jsonObj.name);
</script>
</body>
</html>
四.在JS中[]与{}的区别
[]是数组，{}是JSON
①java中的数组： int[] arr = {1,2,3}
②JS中的数组 : var arr = [1,2,3]
③JSON： var jsonObj = {“email”:“[email protected]”}
五.tbody
<!DOCTYPE html>
<html>
<head>
<title>设置table的tbody</title>
</head>
<body>
<script type="text/javascript">
//有这些json数据
var data = {
"total" : 4,
"emps" : [
{
"empno":7777,"ename":"smith","sal":8000},
{
"empno":6666,"ename":"smith2","sal":8200},
{
"empno":5555,"ename":"smith3","sal":9999}
]
}
//希望把json数据解析到table当中
window.onload = function(){
//给按钮绑定点击事件
document.getElementById("displayBtn").onclick=function(){
//定义空字符串
var html = "";
for(var i = 0;i < data.emps.length;i++){
//取出每一个元素
var emp = data.emps[i];
html += "<tr>";
html += "<td>" + emp.empno + "</td>";
html += "<td>" + emp.ename + "</td>";
html += "<td>" + emp.sal + "</td>";
html += "</tr>";
}
document.getElementById("emptybody").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>
<tbody id="emptybody">
</tbody>
</tr>
</table>
员工总人数为：<span id="count">0</span>
</body>
</html>