JavaScript JSON parse() 方法
JavaScript基础 2022-06-08 10:56:22小码哥的IT人生shichen
JavaScript JSON parse() 方法
实例
解析一个字符串（以 JSON 格式编写）并返回一个 JavaScript 对象：
var obj = JSON.parse('{"firstName":"Bill", "lastName":"Gates"}');
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON parse()</h1>
<p>JSON.parse() 解析字符串，以 JSON 格式编写，并返回 JavaScript 对象。</p>
<p>"firstName" 的值是：</p>
<p id="demo"></p>
<script>
var obj = JSON.parse('{"firstName":"Bill", "lastName":"Gates"}');
document.getElementById("demo").innerHTML = obj.firstName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
JSON.parse() 方法解析字符串并返回 JavaScript 对象。
该字符串必须以 JSON 格式编写。
JSON.parse() 方法可以选择使用函数来转换结果。
浏览器支持
表格中的数字注明了完全支持该方法的首个浏览器版本。
| 方法 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| parse() | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
语法
JSON.parse(string, function)
参数值
| 参数 | 描述 |
|---|---|
| string | 必需。以 JSON 格式写的字符串。 |
| reviver function |
可选。用于转换结果的函数。为每个项目调用该函数。任何嵌套对象都在父对象之前进行转换。 如果此函数返回有效值，则将项目值替换为转换后的值。 如果此函数返回 undefined，则删除该项目。 |
技术细节
| 返回值： | JSON 对象，或数字。 |
|---|---|
| JavaScript 版本： | ECMAScript 5 |
更多实例
示例代码：
如何使用 reviver 函数：
/* 把 "city" 值替换为大写：*/
var text = '{ "name":"Bill", "age":"19", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "city") {
return value.toUpperCase();
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.city;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>使用 <em>reviver</em> 函数</h1>
<p>大写 “city” 的值：</p>
<p id="demo"></p>
<script>
var text = '{ "name":"Bill", "age":"19", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "city") {
return value.toUpperCase();
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.city;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
解析从服务器收到的 JSON：
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", "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", "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 简介
