JS-JSON
JS-JSON
1.JSON概述
1.1什么是JSON,有什么用？
JavaScript Object Notation(JavaScript对象标记)，简称JSON。(数据交换格式)
JSON的主要作用是：在系统A和系统B交换数据时，作为一种标准的数据交换格式。
JSON目前非常流行，九成以上的系统都用的JSON。
1.2最常用的两种数据交换格式
在实际开发中，有两种数据交换格式使用最多，分别是JSON和XML。
1.2.1两种数据交换格式特点
- JSON：体积小，易解析。
- XML：体积较大，解析麻烦，但是优点是语法严谨。常用于银行相关系统中。
1.2.2两种数据交换格式的写法
JSON：
<script type="text/javascript">
var students = [
{"sno":"001","sname":"张三","sex":"男"},
{"sno":"002","sname":"李四","sex":"女"},
{"sno":"003","sname":"王五","sex":"男"}
];
</script>
XML：
<?xml version="1.0" encoding="UTF-8"?>
<students>
<student sno="001">
<sname>张三</sname>
<sex>男</sex>
</student>
<student sno="002">
<sname>李四</sname>
<sex>女</sex>
</student>
<student sno="003">
<sname>王五</sname>
<sex>男</sex>
</student>
</students>
HTML和XML有一个父亲：SGML(标准通用的标记语言)
HTML主要做页面展示，所以语法松散，很随意。
XML主要做数据存储和数据描述，所以语法相当严格。
2.创建JSON对象并访问其属性
2.1JSON的语法格式
var 对象名 = {
"属性名1":属性值1,
"属性名2":属性值2,
"属性名3":属性值3,
...
};
2.2创建JSON对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//创建一个JSON对象
var emp = {
"empno" : "001",
"ename" : "张三",
"sex" : "男"
};
//访问JSON对象里的属性
alert(emp.empno + "," + emp.ename + "," + emp.sex);
</script>
</body>
</html>
2.3对比不使用JSON创建对象
在没有使用JSON时，需要先定义类，然后通过类创建对象，然后再访问对象的属性。
//定义类
Emp = function(empno,ename,sex) {
this.empno = empno;
this.ename = ename;
this.sex = sex;
};
//创建对象
var emp = new Emp("001","张三","男");
//访问对象属性
alert(emp.empno + "," + emp.ename + "," + emp.sex);
对比起来，JSON最大的不同在于对象没有类型。
这点使得JSON更加轻巧，体积小，易解析，是轻量级的。
3.创建JSON数组并遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建JSON数组并遍历</title>
</head>
<body>
<script type="text/javascript">
//创建JSON数组
var emps = [
{"empno":"001","ename":"张三","sex":"男"},
{"empno":"002","ename":"李四","sex":"女"},
{"empno":"003","ename":"王五","sex":"男"}
];
//遍历JSON数组
for(var i = 0;i < emps.length;i++) {
var emp = emps[i];
alert(emp.empno + "," + emp.ename + "," + emp.sex);
// document.write(emp.empno + "," + emp.ename + "," + emp.sex);
// document.write("<br>");
}
</script>
</body>
</html>
4.创建套娃对象实例
4.1实例1
请设计一个JSON格式的数据，可以描述一个学生的学号、姓名、性别、爱好(有多项)、住址(多级别)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建JSON数组并遍历</title>
</head>
<body>
<script type="text/javascript">
//创建JSON对象
var student = {
"sno" : "001",
"sname" : "张三",
"sex" : "男",
"hobby" : ["唱","跳","rap"],
"address" : {
"province" : "河南",
"city" : "南阳",
"area" : "宛城区"
}
};
//访问对象属性
//要求显示该名学生的姓名、来自哪个城市、兴趣爱好有哪些
document.write(
student.sname + "同学来自"
+ student.address.province + student.address.city
+ "，兴趣是"
+ student.hobby[0] + "、" + student.hobby[1] + "、" + student.hobby[2] + "。"
);
</script>
</body>
</html>
4.2实例2
请设计一个JSON格式的数据，可以描述整个班级中每一个学生的信息，以及总人数信息。
<script type="text/javascript">
var students = {
"count" : 3,
"student" : [
{"sno" : "001","sname" : "张三","sex" : "男"},
{"sno" : "002","sname" : "李四","sex" : "女"},
{"sno" : "003","sname" : "王五","sex" : "男"}
]
};
</script>
5.eval函数
eval函数的作用：
将一段字符串当作JS代码解释并执行。
如：
<script type="text/javascript">
window.eval("var i = 100;");
alert(i);
</script>
java连接数据库，查询数据后，将数据在java程序中拼接成JSON格式的字符串，然后将JSON格式的字符串响应到浏览器中。
也就是说，响应到浏览器中的仅仅是一个JSON格式的字符串，还不是一个JSON对象。
此时，我们可以使用eval函数，就将JSON格式的字符串转换成JSON对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eval函数</title>
</head>
<body>
<script type="text/javascript">
//JSON格式的字符串
var fromJava = "{\"username\":\"张三\",\"password\":\"123\"}";
//将JSON格式的字符串转换成JSON对象
window.eval("var userObj = " + fromJava);
//访问对象属性
alert(userObj.username + "," + userObj.password);
</script>
</body>
</html>
