JSON.parse() 解析数据
JSON.parse()
JSON 的常规用途是同 web 服务器进行数据传输。
在从 web 服务器接收数据时，数据永远是字符串。
通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象。
实例 – 解析 JSON
请想象一下我们从 web 服务器接收到这段文本：
'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'
请使用 JavaScript 函数 JSON.parse() 把文本转换为 JavaScript 对象：
var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');
请确保这段文本以 JSON 格式书写，否则会出现语法错误。
请在您的页面中使用 JavaScript 对象：
示例代码：
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>用 JSON 字符串创建对象</h1>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>
运行结果：
用 JSON 字符串创建对象 Steve Jobs
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
来自服务器的 JSON
您能够通过使用 AJAX 请求从服务器请求 JSON。
只要服务器的响应是用 JSON 格式编写的，你可以将字符串解析成 JavaScript 对象。
示例代码：
请使用 XMLHttpRequest 从服务器获取数据：
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", "json_demo.txt", true);
xmlhttp.send();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>使用 XMLHttpRequest 获取文件的内容</h1>
<p>JSON 格式的内容能够轻松转换为 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "/demo/json_demo.txt", true);
xmlhttp.send();
</script>
<p>查看 <a href="/demo/json_demo.txt" target="_blank">json_demo.txt</a></p>
</body>
</html>
运行结果：
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
作为 JSON 的数组
在对衍生自数组的 JSON 使用 JSON.parse() 后，此方法将返回 JavaScript 数组，而不是 JavaScript 对象。
示例代码：
从服务器返回的 JSON 是数组：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>数组内容</h1>
<p>以 JSON 数组写的内容会被转换为 JavaScript 数组。</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
};
xmlhttp.open("GET", "/demo/json_demo_array.txt", true);
xmlhttp.send();
</script>
<p>查看 <a href="/demo/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>
</body>
</html>
运行结果：
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例外
解析日期
JSON 中不允许日期对象。
如果您需要包含日期，请写为字符串。
之后您可以将其转换回日期对象：
示例代码：
把字符串转换为日期：
var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>把字符串转换为 date 对象</h1>
<p id="demo"></p>
<script>
var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
</script>
</body>
</html>
运行结果：
把字符串转换为 date 对象 Bill Gates, Fri Oct 28 1955 08:00:00 GMT+0800 (中国标准时间)
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
或者您可以已使用 JSON.parse() 函数的第二个参数，被称为 reviver。
这个 reviver 参数是函数，在返回值之前，它会检查每个属性。
示例代码：
将字符串转换为日期，使用 reviver 函数：
var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
}});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>把字符串转换为 date 对象</h1>
<p id="demo"></p>
<script>
var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
</script>
</body>
</html>
运行结果：
把字符串转换为 date 对象 Bill Gates, Fri Oct 28 1955 08:00:00 GMT+0800 (中国标准时间)
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
解析函数
JSON 中不允许函数。
如果您需要包含函数，请把它写作字符串。
稍后您可以把它转换回函数：
示例代码：
把字符串转换为函数：
var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>把字符串转换为函数</h1>
<p id="demo"></p>
<script>
var text = '{"name":"Bill Gates", "age":"function() {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
</script>
</body>
</html>
运行结果：
把字符串转换为函数 Bill Gates, 62
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您应该避免在 JSON 中使用函数，函数会丢失它们的作用域，而且您还需要使用 eval() 把它们转换回函数。
浏览器支持
所有主流浏览器以及最新的 ECMAScript (JavaScript) 标准均包含 JSON.parse() 函数：
下表中的数字指定了完全支持 JSON.parse() 函数的首个浏览器版本：
| Yes | 8.0 | 3.5 | 4.0 | 10.0 |
对于更老的浏览器，以下地址中的 JavaScript 库是可用的：
