JSON(JavaScript Object Notation,JavaScript 对象表示法)是一种存储和交换文本信息的语法。类似于XML。
实例
<h2>JSON Object Creation in JavaScript</h2>
<p>
Name:
<span id="jname"></span>
<br /> Age:
<span id="jage"></span>
<br /> Address:
<span id="jstreet"></span>
<br /> Phone:
<span id="jphone"></span>
<br />
</p>
<script>
var JSONObject = {
"name": "John Johnson",
"street": "Oslo West 555",
"age": 33,
"phone": "555 1234567"
};
document.getElementById("jname").innerHTML = JSONObject.name
document.getElementById("jage").innerHTML = JSONObject.age
document.getElementById("jstreet").innerHTML = JSONObject.street
document.getElementById("jphone").innerHTML = JSONObject.phone
</script>
JSON 语法
JSON 语法是 JavaScript 对象表示法语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
JSON 名称/值对
JSON 数据的书写格式是:名称/值对。
名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:
"firstName" : "John"
这很容易理解,等价于这条 JavaScript 语句:
firstName = "John"
JSON 值
JSON 值可以是:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
JSON 对象
JSON 对象在花括号中书写:
对象可以包含多个名称/值对:
{ "firstName":"John" , "lastName":"Doe" }
这一点也容易理解,与这条 JavaScript 语句等价:
firstName = "John"
lastName = "Doe"
JSON 数组
JSON 数组在方括号中书写:
数组可包含多个对象:
{
"employees": [{
"firstName": "John",
"lastName": "Doe"
},
{
"firstName": "Anna",
"lastName": "Smith"
},
{
"firstName": "Peter",
"lastName": "Jones"
}
]
}
在上面的例子中,对象 “employees” 是包含三个对象的数组。每个对象代表一条关于某人(有姓和名)的记录。
JSON 使用 JavaScript 语法
因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:
var employees = [{
"firstName": "John",
"lastName": "Doe"
},
{
"firstName": "Anna",
"lastName": "Smith"
},
{
"firstName": "Peter",
"lastName": "Jones"
}
];
可以像这样访问 JavaScript 对象数组中的第一项:
employees[0].lastName;
返回的内容是:
Doe
可以像这样修改数据:
employees[0].firstName = "Jonatan";
在下面的章节,您将学到如何把 JSON 文本转换为 JavaScript 对象。
JSON 文件
JSON 文件的文件类型是 “.json”
JSON 文本的 MIME 类型是 “application/json”
JSON 使用
JSON – 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval()
函数,用 JSON 数据来生成原生的 JavaScript 对象。
把 JSON 文本转换为 JavaScript 对象
JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。
为了更简单地讲解,我们使用字符串作为输入进行演示(而不是文件)。
JSON 实例 – 来自字符串的对象
创建包含 JSON 语法的 JavaScript 字符串:
var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:
var obj = eval ("(" + txt + ")");
在网页中使用 JavaScript 对象:
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>
JSON 解析器
tips: eval() 函数可编译并执行任何 JavaScript 代码。在旧版本的浏览器中,使用eval()对JSON数据结构求值存在风险,因为这可能会执行一些恶意代码。
JSON对象有两个办法:stringift()和parse()。在最简单的情况下,这两个方法分别把javascript对象序列化为JSON字符串和把JSON字符串解析为原生javascript值。
实例
var book = {
"title": "Professional JavaScript",
"authors": [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book);
alert(jsonText);
上面的例子将一个javascript对象转化为一个JSON字符串,默认情况下,JSON.stringift()输出的JSON字符串是不带任何空格缩进的,所以jsonText中的字符串是这样的:
{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3,"year":2011}
然后将JSON字符串直接传递给JSON.parse()就可以得到相应的javascript对象,
var bookCopy = JSON.parse(jsonText);
如上代码可以创建一个类似book的对象
alert(bookCopy.title); //Professional JavaScript
Ajax请求JSON数据
原生javascript请求实例
<body>
<button id="btn">请求数据</button>
<ul id="list"></ul>
<script>
var btn=document.getElementById('btn');
var list=document.getElementById('list');
btn.onclick=function (){
// 1.创建XMLHttpRequest对象
var xhr=null;
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
};
xhr.open('get','test.json',true);
xhr.send(null);
xhr.onreadystatechange=function (){
if (xhr.readyState==4) {
if (xhr.status==200) {
var json=JSON.parse(xhr.responseText);
for (var i = 0; i < json.length; i++) {
list.innerHTML+='<li>姓名:'+json[i].name+', 性别:'+json[i].sex+', 年龄:'+json[i].age+', 成绩:'+json[i].score+'</li>';
};
} else{
alert(xhr.status);
};
};
}
}
</script>
</body>
test.json
[
{"name":"老王","sex":"女","age":19,"score":66},
{"name":"老刘","sex":"男","age":22,"score":72},
{"name":"老李","sex":"女","age":24,"score":85},
{"name":"老张","sex":"男","age":30,"score":96}
]

JQuery 的getJSON()方法
使用JQuery的getJSON()可以快速的获取后台的JSON数据
用法
$(selector).getJSON(url,data,success(data,status,xhr))
参数 | 说明 |
---|---|
url | 必需。规定将请求发送的哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
success(data,status,xhr) | 可选。规定当请求成功时运行的函数。 |
该函数是简写的 Ajax 函数,等价于:
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});