JavaScript访问JSON
疑问：JSON主要用于数据传递和数据表示上，程序势必要和JSON数据进行交互；那么JavaScript如何访问JSON文件的呢
JavaScript天生就具备JSON数据的处理能力
在web目录下创建sample.html
直接将emp.json中的内容，赋值给变量json；JavaScript可以将其作为一个数组进行解析
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var json=[
{
"empno": "7369",
"ename": "张三",
"job": "软件工程师",
"hiredate": "2017-05-12",
"salary": 130000,
"dname": "研发部"
},
{
"empno": "7449",
"ename": "王五",
"job": "客户经理",
"hiredate": "2018-06-12",
"salary": 100000,
"dname": "市场部",
"customers": [
{
"cname": "李四"
},
{
"cname": "黄玉峰"
},
{
"cname": "郭嘉"
}
]
}
];
console.log(json);
</script>
</head>
<body>
</body>
</html>
|
结果：虽然输出的页面是空白的，但是在控制台中可以查看到我们书写的JSON数组
示例：在浏览器页面对json内容进行输出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var json=[
{
"empno": "7369",
"ename": "张三",
"job": "软件工程师",
"hiredate": "2017-05-12",
"salary": 130000,
"dname": "研发部"
},
{
"empno": "7449",
"ename": "王五",
"job": "客户经理",
"hiredate": "2018-06-12",
"salary": 100000,
"dname": "市场部",
"customers": [
{
"cname": "李四"
},
{
"cname": "黄玉峰"
},
{
"cname": "郭嘉"
}
]
}
];
console.log(json);
for (var i=0;i<json.length;i++){
var emp = json[i];
document.write("<h1>");
document.write(emp.empno);
document.write(","+emp.empno);
document.write(","+emp.job);
document.write(","+emp.hiredate);
document.write(","+emp.salary);
document.write(","+emp.dname);
document.write("</h1>");
if (emp.customers !=null){
document.write("<h2>");
for (var j=0;j<emp.customers.length;j++){
var customer=emp.customers[j];
document.write(customer.cname+",");
}
document.write("</h2>")
}
}
</script>
</head>
<body>
</body>
</html>
|
可以看到：（1）JavaScript把[]JSON作为一个数组解析了；（2）直接通过JSON[i]这种方式就能获取，JSON对象数组中的第i个对象；（3）然后通过emp.empno这种形式就能获取empno这个键对应的值；（4）一个键的值可能是一个字符串（或数组），也可以是包含在JSON对象中的数组
效果：
JSON与字符串互相转换
- JSON.parse()方法将字符串转换为JSON对象，注意JSON对象是浏览器内置对象：JavaScript可以直接调用，但IE8以下的版本不支持JSON对象
- JSON.stringify()方法将JSON对象转换为字符串
示例一
JavaScript将字符串转成JSON对象：JSON.parse(str);
需要注意：
- 定义JSON对象的方式是：var json = {}; 定义字符串是：var str=”{}”;
- var str = “{"class_name":"五年级三班"}”;其中的反斜杆是为了将””这个符号转义
首先在web目录下创建sample2.html
然后在文件中定义字符串后转变为JSON对象
效果：
示例二
JavaScript将JSON对象转换为字符串：JSON.stringify(json)
首先在web目录下，创建sample3.html
在sample3.html中将JSON对象转变为字符串
效果：
字符串和JSON对象转换的用途
Ajax中会用到；Ajax是JavaScript和后台的Java程序进行通信的方式；
字符串转JSON的一个应用：
Java返回的服务器后台的数据，是一个长的很像JSON的字符串；在JavaScript中获取到后台返回的这个数据后，需要使用JSON.parse()将这个字符串转换为JSON对象，这样，JavaScript才能将其中的属性提取出来；（这个会很常用）
JSON转字符串：
这个在实际开发中不常用，了解就好了
初始化JSON对象
在JavaScript中可以将json看出一个对象，定义json后，可以通过设置属性的方式，初始化json；如下面的json2；
这种方式，更像是JavaScript把JSON当成了对象处理，很清晰
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始化JSON对象</title>
</head>
<body>
<script type="text/javascript">
var json ={"class_name":"五年级六班"};
var str =JSON.stringify(json);
console.info(json);
console.info(str);
var json2={};
json2.class_name="五年级六班";
json2.location="图书馆";
console.info(json2);
</script>
</body>
</html>
|
效果：
