JavaScript JSON_JavaScript


JavaScript JSON


JSON 是使用于存储和传输数据的格式。

JSON 用于服务端交换文本信息传送数据 。


一、什么是 JSON?

  • JSON 名称指 JavaScript Object Notation

  • JSON 是轻量级的数据互换的格式。

  • JSON 是独立语言。

  • JSON 比较于理解。

JSON 使用的 JavaScript 语法,JSON 格式仅是一个纯文本。

JSON 只是一种数据的格式。JSON 数据的代码可在任何编程语言中编写传送。


 

二、JSON 示例代码

JSON 语法定义了 sites 对象: 信息(对象)的数组:

JSON 示例代码

{"sictesc":[

   {"nianname":"css5", "url":"www.css5.net"},

   {"nianname":"css5", "url":"www.css5.net"},

   {"nianname":"css5", "url":"www.css5.net"}

]}



三、JSON 格式与 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是一样的。

于是它们很类似,将 JSON 文本转换成 javascript 对象。


四、JSON 语法规则

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

  • 数据为名称/值和对。

  • 数据由逗号分隔。

  • 大括号保存对象

  • 方括号保存数组


五、JSON 数据 - 一个名称对应一个值

JSON 数据格式为得到建和值对,类于 JavaScript 对象属性。

"ndbb" 名称 和 值对(在双引号中)后面使用冒号(:)分割。

"nianname":"css5"



六、JSON 对象

JSON 对象使用于在大括号({})中书写。

在 JavaScript 中, 对象中可存留多个 键/值对:

{"nianname":"Runoob", "url":"www.css5.net"}



七、JSON 数组

JSON 数组在中括号内书写。

就如在 JavaScript 中, 数组可包含对象:

"niansites":[

   {"nianname":"Runoob", "url":"www.css5.net"}, //json对象

   {"nianname":"css5", "url":"www.css5.net"},  //json对象

   {"nianname":"css5", "url":"www.css5.net"}  //json对象

]

在上示例代码中,对象 "niansites" 是一个数组,三个对象都包含了。

每个对象意味着一条信息记载:(有名称 和 路径地址)


八、JSON 文本转换为 JavaScript 对象

读取 JSON 数据,我们通常从服务器中读取,输出在网页中显示数据。

可使用 JSON 字符串作为输入演示。这样更简单。

创建 JavaScript 字符串,首先要创建包含 JSON 语法:

var text = '{ "niansites" : [' +

'{ "nianname":"Runoob" , "url":"www.css5.net" },' +

'{ "nianname":"css5" , "url":"www.css5.net" },' +

'{ "nianname":"css5" , "url":"www.css5.net" } ]}';

然后使用 JavaScript 内置的函数 JSON.parse() 把字符串转变为 JavaScript 对象:

var obj = JSON.parse(text);

最后,在这个页面中使用新的 JavaScript 对象:

示例代码

var text = '{ "sites" : [' +

   '{ "nianname":"Runoob" , "url":"www.css5.net" },' +

   '{ "nianname":"css5" , "url":"www.css5.net" },' +

   '{ "nianname":"css5" , "url":"www.css5.net" } ]}';

   

obj = JSON.parse(text);

document.getElementById("demo").innerHTML = obj.sites[1].nianname + " " + obj.sites[1].url;


演示一下

九、布尔值

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

{ "flag":true }

JSON null


JSON 可以设置 null 值:

{ "runoob":null }



Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved