什么是JSON?
JSON
是JavaScript Object Notation的缩写,它是一种基于文本的轻量级数据交换格式。它是一门独立的语言。
PHP、JSP、.NET等等编程语言都支持JSON。
JSON 使用 JavaScript 语法。但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。
JSON的两种结构
对象结构
JSON对象保存在大括号中。可以存在多个关键字/值
对。
其中关键字是字符串,而值可以是字符串、数值、true、false、null、对象或数组。
实例:
代码语言:javascript复制{
"firstname": "John",
"secondname": "Doe",
"age": 20,
}
数组结构
JSON数组保存在中括号中。
实例:
数组
代码语言:javascript复制[
"John",
"Marry",
"Mark"
]
对象中的数组
代码语言:javascript复制{
"school": "1st school",
"teachers":[
{"name": "Nick", "age": 30},
{"name": "Marry", "age": 35}
]
}
JavaScript中使用JSON
因为JSON使用JavaScript语法,所以浏览器能直接处理JavaScript中的JSON。
访问、修改和删除
打开浏览器控制台,通过 JavaScript,创建一个对象数组,并像这样进行赋值:
代码语言:javascript复制var teachers = [{"name": "Nick", "age": 30}, {"name": "Marry", "age": 35}]
访问
使用teachers[0]
可以访问对象数组第一个对象。
可以使用teachers[0].name
访问JavaScript对象数组的值。
除此之外使用teachers[0]["name"]
也可以访问JavaScript对象数组的值。
修改
修改对象数组中的值。
删除
使用delete teachers[0]
可以删除对象数组第一个值。
delete teachers[0].name
或者delete teachers[0]["name"]
都可以删除该对象的name属性。
如下图所示:
遍历对象
遍历对象的属性
使用for-in
来遍历对象中的属性。
var teachers = {"name": "Nick", "age": 30};
for (x in teachers) {
console.log(x);
}
在控制台输出如下:
遍历属性的值
在 for-in
循环对象的属性时,使用中括号来访问属性的值。
var teachers = {"name": "Nick", "age": 30};
for (x in teachers) {
console.log(teachers[x]);
}
在控制台输出如下:
遍历数组
使用for-in
遍历数组。
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);
}
在控制台输出如下:
JSON字符串与JS对象的转换
parse()
parse()
将JSON字符串转换为JavaScript对象。
语法
代码语言:javascript复制var obj = JSON.parse(str[, reviver]);
str
为必须,一个有效的JSON字符串。reviver
可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
我们从服务端获取了如下数据:
代码语言:javascript复制{"name": "Marry", "nation":"USA", "age": 30}
利用JSON.parse()
处理以上数据:
var per = JSON.parse('{"name": "Marry", "nation":"USA", "age": 30}');
解析完成后就可以使用从该JSON字符串转化的JavaScript对象了。
从服务端接收JSON
使用AJAX从服务端请求JSON数据并解析为JavaScript对象。
利用XMLHttpRequest()
函数创造一个新的请求对象。
var request = new XMLHttpRequest();
当readystate
改变时就会触发onreadystatechange
事件。(详见AJAX – onreadystatechange 事件)
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
代码语言:javascript复制var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState==4 && this.status==200)
{
Obj = JSON.parse(this.responseText);
console.log(Obj.name);
}
}
最后发送request
请求。
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目录下。
{
"school": "1st school",
"stunum": 30000,
"teachers": [
{
"name": "Nick",
"age": 30
},
{
"name": "Marry",
"age": 35
}
]
}
在mytest目录下创建一个html
文件。
<!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目录下,打开网站。
stringify()
stringify()
JavaScript对象转换为JSON字符串。
语法
代码语言:javascript复制var obj = JSON.stringify(value[, replacer[, space]]);
- value为必须,是需要转换的JavaScript对象或者数组。
- replacer为可选,用于转换结果的函数或数组。
- 如果replacer为函数,则
JSON.stringify
将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员 - 如果replacer是一个数组,会遍历数组的值,以数组的值作为value的属性。如果value原本包含该属性,那么显示该属性,如果不包含则不显示。
- 如果replacer为函数,则
- space为可选,文本添加缩进、空格和换行符。
实例
代码语言:javascript复制var obj = { name: "Marry", nation: "USA", age: 30};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
在控制台的结果如下图所示:
JSON工具
JSON在线解析工具