JSON教程

JSON.parse()

时间:2018/12/20 11:26:27  作者:互联网  来源:网络转载  查看:24393  评论:0
内容摘要:JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。语法JSON.parse(text[, reviver])参数说明:text:必需, 一个有效的 JSON 字符串。reviv...
JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明:

  • text:必需, 一个有效的 JSON 字符串。
  • reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

JSON 解析实例

例如我们从服务器接收了以下数据:

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我们使用 JSON.parse() 方法处理以上数据,将其转换为 JavaScript 对象:

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

解析前要确保你的数据是标准的 JSON 格式,否则会解析出错。

解析完成后,我们就可以在网页上使用 JSON 数据了:

实例

<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + ":" + obj.site;

</script>

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS中文教程网 8939.org</title>
</head>
<body>
 
 
<h2>从 JSON 对象中创建 JavaScript 对象</h2>
<p id="demo"></p>
 
<script>
var str='{ "name":"JS中文教程网", "alexa":10000, "site":"www.8939.org" }';
var obj = JSON.parse(str);
document.getElementById("demo").innerHTML = obj.name + ":" + obj.site;
</script>
 
</body>
</html>
 

从服务端接收 JSON 数据

我们可以使用 AJAX 从服务器请求 JSON 数据,并解析为 JavaScript 对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中文教程网 8939.org</title>
</head>
<body>
 
<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式,可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>
 
<p id="demo"></p>
 
<script>
 
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/json_demo.txt", true);
xmlhttp.send();
 
</script>
 
<p>查看 JSON 文件数据 <a href="/json/json_demo.txt" target="_blank">json_demo.txt</a></p>
 
</body>
</html>


从服务端接收数组的 JSON 数据

如果从服务端接收的是数组的 JSON 数据,则 JSON.parse 会将其转换为 JavaScript 数组:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中文教程网 8939.org</title>
</head>
<body>
 
<h2>内容是数组</h2>
<p>内容是数组会转换为 JavaScript 数组。</p>
 
<p id="demo"></p>
 
<script>
 
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/json/json_demo_array.txt", true);
xmlhttp.send();
 
</script>
 
<p>查看服务端数据 <a href="/json/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>
 
</body>
</html>

浏览器支持

主流浏览器都支持 JSON.parse() 函数:

相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |