JSON: **J**ava**S**cript **O**bject **N**otation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法，类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 易于人阅读和编写。

C、Python、C++、Java、PHP、Go 等编程语言都支持 JSON。





**什么是 JSON ？**

- JSON 指的是 JavaScript 对象表示法（**J**ava**S**cript **O**bject **N**otation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持 JSON
- JSON 具有自我描述性，更易理解



JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

 

数据在名称/值对中

数据由逗号 , 分隔

使用斜杆 \ 来转义字符

大括号 {} 保存对象

中括号 [] 保存数组，数组可以包含多个对象

JSON 的两种结构：

 

1、对象：大括号 {} 保存的对象是一个无序的名称/值对集合。一个对象以左括号 { 开始， 右括号 } 结束。每个"键"后跟一个冒号 :，名称/值对使用逗号 , 分隔。

 

 

**JSON 名称/值对**

JSON 数据的书写格式是：

key : value

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "菜鸟教程"

这很容易理解，等价于这条 JavaScript 语句：

name = "菜鸟教程"



**JSON 值**

JSON 值可以是：

- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）
- 对象（在大括号中）
- null



**JSON 数字**

JSON 数字可以是整型或者浮点型：

{ "age":30 }



**JSON 对象**

JSON 对象在大括号 **{}** 中书写：

{key1 : value1, key2 : value2, ... keyN : valueN }

对象可以包含多个名称/值对：

{ "name":"菜鸟教程" , "url":"www.runoob.com" }

这一点也容易理解，与这条 JavaScript 语句等价：

name = "菜鸟教程" url = "www.runoob.com"

 



**JSON 数组**

JSON 数组在中括号 **[]** 中书写：

数组可包含多个对象：

[

  { key1 : value1-1 , key2:value1-2 }, 

  { key1 : value2-1 , key2:value2-2 }, 

  { key1 : value3-1 , key2:value3-2 }, 

  ...

  { key1 : valueN-1 , key2:valueN-2 }, 

]

{ "sites": [ { "name":"菜鸟教程" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] }

在上面的例子中，对象 **sites** 是包含三个对象的数组。每个对象代表一条关于某个网站（name、url）的记录。



**JSON 布尔值**

JSON 布尔值可以是 true 或者 false：

{ "flag":true }



**JSON null**

JSON 可以设置 null 值：

{ "runoob":null }



**JSON 使用 JavaScript 语法**

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

**实例**

var sites = [ { "name":"runoob" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ];

可以像这样访问 JavaScript 对象数组中的第一项（索引从 0 开始）：

sites[0].name;

返回的内容是：

runoob

可以像这样修改数据：

sites[0].name="菜鸟教程";

JSON（JavaScript Object Notation） 本质上是一种 数据格式（纯字符串），它的目的就是用来在 服务器和客户端之间传递数据。

 

JSON 看起来和 JavaScript 对象字面量很像，但它其实是 字符串。

 

**JSON.parse()**

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

**语法**

JSON.parse(text[, reviver])

**参数说明：**

- **text:**必需， 一个有效的 JSON 字符串。
- **reviver:** 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。



**JSON 解析实例**

例如我们从服务器接收了以下数据：

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

*解析前要确保你的数据是标准的 JSON 格式，否则会解析出错。*

*你可以使用我们的在线工具检测：*[*https://www.jyshare.com/front-end/53*](https://www.jyshare.com/front-end/53)*。*

解析完成后，我们就可以在网页上使用 JSON 数据了：

**实例**

<p id="demo"></p> <script> var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'); document.getElementById("demo").innerHTML = obj.name + "：" + obj.site; </script>


 [**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjson_parse3)



**从服务端接收 JSON 数据**

我们可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。

**实例**

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "/try/ajax/json_demo.txt", true); xmlhttp.send();


 [**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjson_ajax)

查看服务端数据： [json_demo.txt](https://www.runoob.com/try/ajax/json_demo.txt)



**从服务端接收数组的 JSON 数据**

如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组：

**实例**

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; } }; xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true); xmlhttp.send();


 [**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjson_ajax_array)

查看服务端数据： [json_demo_array.txt](https://www.runoob.com/try/ajax/json_demo_array.txt)



**异常**

**解析数据**

JSON 不能存储 Date 对象。

如果你需要存储 Date 对象，需要将其转换为字符串。

之后再将字符串转换为 Date 对象。

**实例**

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;


 [**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjson_parse_date)

我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数。

**实例**

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}'; var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value; }}); document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;


 [**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjson_parse_reviver)



**解析函数**

JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。

**实例**

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

JSON.stringify()

JSON 通常用于与服务端交换数据。

 

在向服务器发送数据时一般是字符串。

 

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

 

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

 

value:

必需， 要转换的 JavaScript 值（通常为对象或数组）。

 

replacer:

可选。用于转换结果的函数或数组。

 

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

 

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

 

space:

可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

 

JavaScript 对象转换

例如我们向服务器发送以下数据：

 

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：

 

var myJSON = JSON.stringify(obj);

myJSON 为字符串。

 

我们可以将 myJSON 发送到服务器：

 

实例

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

 

尝试一下 »

JavaScript 数组转换

我们也可以将 JavaScript 数组转换为 JSON 字符串：

 

实例

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];

var myJSON = JSON.stringify(arr);

myJSON 为字符串。

 

我们可以将 myJSON 发送到服务器：

 

实例

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];

var myJSON = JSON.stringify(arr);

document.getElementById("demo").innerHTML = myJSON;

 

尝试一下 »

异常

解析数据

JSON 不能存储 Date 对象。

 

JSON.stringify() 会将所有日期转换为字符串。

 

实例

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};

var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

 

尝试一下 »

之后你可以再将字符串转换为 Date 对象。

 

解析函数

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

 

实例

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};

var myJSON = JSON.stringify(obj);

 

document.getElementById("demo").innerHTML = myJSON;

 

尝试一下 »

我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：

 

实例

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};

obj.alexa = obj.alexa.toString();

var myJSON = JSON.stringify(obj);

 

document.getElementById("demo").innerHTML = myJSON;

 

尝试一下 »

不建议在 JSON 中使用函数。

**JSON 实例**

{ "sites": [ { "name":"菜鸟教程" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] }

这个 sites 对象是包含 3 个站点记录（对象）的数组。



**JSON - 转换为 JavaScript 对象**

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。