什么是JSON？

JSON是JavaScript Object Notation的缩写，它是一种基于文本的轻量级数据交换格式。它是一门独立的语言。

PHP、JSP、.NET等等编程语言都支持JSON。

JSON 使用 JavaScript 语法。但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

JSON的两种结构

对象结构

JSON对象保存在大括号中。可以存在多个关键字/值对。

其中关键字是字符串，而值可以是字符串、数值、true、false、null、对象或数组。

实例：

1
2
3
4
5
{
    "firstname": "John",
    "secondname": "Doe",
    "age": 20,
}

数组结构

JSON数组保存在中括号中。

实例：

数组

1
2
3
4
5
[
    "John", 
    "Marry",
    "Mark"
]

对象中的数组

1
2
3
4
5
6
7
{
    "school": "1st school",
    "teachers":[
    	{"name": "Nick", "age": 30},
    	{"name": "Marry", "age": 35}
	]
}

JavaScript中使用JSON

因为JSON使用JavaScript语法，所以浏览器能直接处理JavaScript中的JSON。

访问、修改和删除

打开浏览器控制台，通过 JavaScript，创建一个对象数组，并像这样进行赋值：

1
var teachers = [{"name": "Nick", "age": 30}, {"name": "Marry", "age": 35}]

访问

使用teachers[0]可以访问对象数组第一个对象。

7

可以使用teachers[0].name访问JavaScript对象数组的值。

1

除此之外使用teachers[0]["name"]也可以访问JavaScript对象数组的值。

修改

修改对象数组中的值。

2

删除

使用delete teachers[0]可以删除对象数组第一个值。

8

delete teachers[0].name或者delete teachers[0]["name"]都可以删除该对象的name属性。

如下图所示：

5

遍历对象

遍历对象的属性

使用for-in来遍历对象中的属性。

1
2
3
4
5
var teachers = {"name": "Nick", "age": 30};

for (x in teachers) {
     console.log(x);
}

在控制台输出如下：

3

遍历属性的值

在 for-in循环对象的属性时，使用中括号来访问属性的值。

1
2
3
4
5
var teachers = {"name": "Nick", "age": 30};

for (x in teachers) {
     console.log(teachers[x]);
}

在控制台输出如下：

4

遍历数组

使用for-in遍历数组。

1
2
3
4
5
6
7
8
9
10
11
var myschool = {
    "school": "1st school",
    "teachers":[
    	{"name": "Nick", "age": 30},
    	{"name": "Marry", "age": 35}
	]
};

for (x in myschool.teachers){
     console.log(myschool.teachers[x].name);
}

在控制台输出如下：

6

JSON字符串与JS对象的转换

parse()

parse()将JSON字符串转换为JavaScript对象。

语法

1
var obj = JSON.parse(str[, reviver]);

  • str为必须，一个有效的JSON字符串。

  • reviver 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

我们从服务端获取了如下数据：

1
{"name": "Marry", "nation":"USA", "age": 30}

利用JSON.parse()处理以上数据：

1
var per = JSON.parse('{"name": "Marry", "nation":"USA", "age": 30}');

解析完成后就可以使用从该JSON字符串转化的JavaScript对象了。

从服务端接收JSON

使用AJAX从服务端请求JSON数据并解析为JavaScript对象。

利用XMLHttpRequest()函数创造一个新的请求对象。

1
var request = new XMLHttpRequest();

当readystate改变时就会触发onreadystatechange事件。（详见AJAX – onreadystatechange 事件）

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

1
2
3
4
5
6
7
8
9
var request = new XMLHttpRequest(); 

request.onreadystatechange = function() {
    if (this.readyState==4 && this.status==200)
    {
        Obj = JSON.parse(this.responseText);
        console.log(Obj.name);
    }
}

最后发送request请求。

1
2
3
4
5
6
7
8
9
10
11
12
var request = new XMLHttpRequest(); 

request.onreadystatechange = function() {
    if (this.readyState==4 && this.status==200)
    {
        Obj = JSON.parse(this.responseText);
        console.log(Obj.name);
    }
}

request.open("GET", url);
request.send();

实例

新建一个mytest文件夹。

创建一个json格式的文件，将下面数据写入，并放入mytest文件夹下的JSON目录下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "school": "1st school",
  "stunum": 30000,
  "teachers": [
    {
      "name": "Nick",
      "age": 30
    },
    {
      "name": "Marry",
      "age": 35
    }
  ]
}

在mytest目录下创建一个html文件。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>从服务端接收JSON数据</h1>
<p id="demo"></p>

<script>

var request = new XMLHttpRequest(); 

request.onreadystatechange = function() {
    if (this.readyState==4 && this.status==200)
    {
        Obj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = Obj.school;
    }
}

request.open("GET", "/JSON/jsontest.json", true);
request.send();

</script>

<p>查看<a href="/JSON/jsontest.json" target="_blank">JSON</a>文件数据</p>

</body>
</html>

使用phpstudy，将mytest文件夹放在其WWW目录下，打开网站。

9

10

stringify()

stringify()JavaScript对象转换为JSON字符串。

语法

1
var obj = JSON.stringify(value[, replacer[, space]]);
  • value为必须，是需要转换的JavaScript对象或者数组。

  • replacer为可选，用于转换结果的函数或数组。

    1. 如果replacer为函数，则JSON.stringify将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员
    2. 如果replacer是一个数组，会遍历数组的值，以数组的值作为value的属性。如果value原本包含该属性，那么显示该属性，如果不包含则不显示。

  • space为可选，文本添加缩进、空格和换行符。

实例

1
2
3
var obj = { name: "Marry", nation: "USA", age: 30};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

在控制台的结果如下图所示：

11

JSON工具

JSON在线解析工具