您的位置：首页 > Web前端 > JavaScript

JSON学习笔记

2017-08-30 17:46 399 查看

依旧继续跟着学习JSON~

1、什么是JSON

JavaScript对象表示法（Java Script Object Notation）

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

JSON比xml更小、更快、更易解析

（JSON使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台。且JSON文本格式在语法上与创建JavaScript对象的代码相同）

2、JSON语法

JSON语法是JavaScript语法的子集：

数据在名称/值对中

数据由逗号分隔

花括号保存对象

方括号保存

1）JSON名称/值对

如这句话：

"firstName" : "John"

等效于JavaScript的：

firstName="John"

2）JSON对象

JSON对象在花括号中书写，对象可以包含多个多个名称/值对

如：

{ "firstName":"John" , "lastName":"Doe" }

等效于JavaScript中的：

firstName = "John"
lastName = "Doe"

3）JSON数组

JSON数组在方括号中书写，数组中可包含多个对象

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

如此例，对象“employees”是包含三个对象的数组。每个对象代表一条关于某人的记录

4）JSON使用JavaScript语法

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

如：

var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];

我们可以这样访问数据：

employees[0].lastName;

5）JSON文件

其文件类型是“.json”

3、JSON使用

JSON最常用的方法之一，是从web服务器上读取JSON数据（作为文件或作为HttpRequest），将JSON数据转换为JavaScript对象，然后在网页中使用改数据。

看看例子：

创建包含JSON语法的JavaScript字符串：

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

由于JSON语法是JavaScript语法的子集，JavaScript函数eval()可用于将JSON文本转换为JavaScript对象。eval()函数使用的是JavaScript编译器，可解析JSON文本，然后生成JavaScript对象。必须把文本包围在括号中，以避免语法错误

var obj = eval ("(" + txt + ")");

实例代码：

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';

var obj = eval ("(" + txt + ")");

document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： json

相关文章推荐

新的分享

章节导航