JSON基础入门实战讲解在线视频课程-JSON.parse()语法和解析实例

素颜马尾好姑娘i 2024-02-19 16:35 59阅读 0赞

### 浏览器支持 ###

主流浏览器都支持 JSON.parse() 函数：  
 Firefox 3.5  
 Internet Explorer 8  
 Chrome  
 Opera 10  
 Safari 4  
\*  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

### 语法 ###

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 格式，否则会解析出错。  
完整实例：

<!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>

效果见图  
![在这里插入图片描述][20190124141317101.png]

[欢迎大家学习我的视频课程：JSON基础入门实战讲解在线视频课程][JSON]

![JSON基础入门实战讲解在线视频课程-JSON.parse()语法和解析实例][JSON_-JSON.parse]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190124141317101.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/dc4c93f5a3ff4517a43cae0ec64f879e.png
[JSON]: https://ke.qq.com/course/351621?tuin=2b10d56
[JSON_-JSON.parse]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6806ec4f3d70478f94283d7a3e11b1a3.png