1、什么是JSON，有什么用？ 48
JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
2、JSON是一种标准的轻量级的数据交换格式。特点是：体积小，易解析。
3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）
4、JSON的语法格式：
var jsonObj = {
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
};
1.1 xml 演示 了解即可 48
HTML和XML有一个父亲：SGML（标准通用的标记语言。）
HTML主要做页面展示：所以语法松散。很随意。
XML主要做数据存储和数据描述的：所以语法相当严格。
代码在 JSON 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>
1.2 JSON演示 基本语法格式 48
JSON是一种行业内的数据交换格式标准。
JSON在JS中以JS对象的形式存在。
代码在 016 JSON在开发中的使用代码在
<!-- JSON在开发中的使用 48 -->
<!DOCTYPE html>
<html>
<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数组,数组中的每个元素是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>
</html>
2. 复杂JSON的使用 49
细节：JSON对象的值可以是任意的数据类型，例如：可以是JSON类型，数组，Boolean……等等
代码在017 复杂JSON的使用
<!-- 复杂JSON对象的使用 49 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复杂JSON对象的使用</title>
</head>
<body>
<script type="text/javascript">
var user = {
"usercode":110,
"username":"张三",
"sex":true,//提示JSON对象的值可以是任意类型
"address":{//这个地址的值也是JSON类型
"city":"北京",
"street":"大兴区",
"zipcode":"122122121",
},
"aihao":["smoke","drink","tt"]//这里的爱好的值是数组
};
//访问人名以及居住城市
alert(user.username+"居住在"+user.address.city);//张三居住在北京
/*
请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
*/
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>
</html>
3. eval函数 50
3.1 eval函数的作用
eval函数的作用是：将字符串当做一段JS代码解释并执行。
java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
可以使用eval函数,将json格式的字符串转换成json对象.
代码在018 eval函数
<!-- eval函数 50 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>eval函数</title>
</head>
<body>
<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对象.
//小提示这里的\是转义的作用,因为不加转义eval分不清""双引号的起始,所以给相应的双引号加转义
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"//这是java程序给发过来的json格式的"字符串"
//将以上的json格式的字符串转换成json对象
window.eval（"var jsonObj = "+fromJava);
//访问json对象
alert(+","+jsonObj.password);//zhangsan,123
</script>
</body>
</html>
4. 面试题 51
面试题：
在JS当中：[]和{}有什么区别？
[] 是数组。
{} 是JSON。
java中的数组：int[] arr = {1,2,3,4,5};
JS中的数组：var arr = [1,2,3,4,5];
JSON：var jsonObj = {"email" : "zhangsan@","age":25};
代码在019 JSON面试题
<!-- JSON面试题 51 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> JSON面试题</title>
</head>
<body>
<script type="text/javascript">
/*
面试题：
在JS当中：[]和{}有什么区别？
[] 是数组。
{} 是JSON。
java中的数组：int[] arr = {1,2,3,4,5};
JS中的数组：var arr = [1,2,3,4,5];
JSON：var jsonObj = {"email" : "zhangsan@","age":25};
*/
//与上述面试题无关
var json = {
"username" : "zhangsan",
"id":"123"
};
// JS中访问json对象的属性
alert(json.username);
// JS中访问json对象的属性
alert(json["username"]);
//提一嘴for in语句
for(var ele in json){
alert(ele+"="+json[ele]);
}
</script>
</body>
</html>
<!--
JSON是一种行业内的数据交换格式标准。
JSON在JS中以JS对象的形式存在。
-->
5. 设置table的tbody 52
代码在020 设置table的tbody
<!-- 设置table的tbody 52 -->
<!DOCTYPE html>
<html>
<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":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 = "";
//遍历data.emps
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>";
}
//加入表格
//解释innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。着不就解析成了html的table语法了嘛
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%"><!-- table是表格 -->
<tbody id="emptbody"> <!-- tbody代表表格的身体 另外还有头thead，脚tfoot，这三个标签将表格分割只是为了方便js代码操作 -->
<tr>
<!-- th标签也是单元格标签，比td标签多的是自动居中和字体加粗 -->
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
</tbody>
</table>
总共<span id="count">0</span>条数
</body>
</html>
