当前阅读教程:Uni-app入门到精通教程 > 4.5 JSON.parse() | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 4.4.5 删除数组元素 | 下一篇: 4.6 JSON.stringify()转字符串 |
4.5 JSON.parse()本节主要讲解通用JSON处理函数,JSON数据解析函数(JSON.parse)的语法和使用。 4.5.1 浏览器支持主流浏览器都支持 JSON.parse() 函数: n Firefox 3.5 n Internet Explorer 8 n Chrome n Opera 10 n Safari 4 4.5.2 语法JSON 通常用于与服务端交换数据。 在接收服务器数据时一般是字符串。 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。 语法JSON.parse(text[, reviver]) 参数说明: n text:必需, 一个有效的 JSON 字符串。 n reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。 4.5.3 JSON 解析实例例如我们从服务器接收了以下数据,代码示例 如下: { "name":"2d5", "alexa":10000, "site":"www.2d5.net" } 我们使用 JSON.parse() 方法处理以上数据,将其转换为 JavaScript 对象,代码示例 如下: var obj = JSON.parse('{ "name":"2d5", "alexa":10000, "site":"www.2d5.net" }'); 解析前要确保你的数据是标准的 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> 效果见图8-13。
4.5.4 从服务端接收 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", "http://www.8939.org/json/json_demo.txt", true); xmlhttp.send();
</script>
<p>查看 JSON 文件数据 <a href="http://www.8939.org/json/json_demo.txt" target="_blank">json_demo.txt</a></p>
</body> </html> json_demo.txt文件示例 代码如下: {"name":"myweb","num":3}
4.5.5 从服务端接收数组的 JSON 数据json_demo_array.txt的示例 代码如下: [ "Google", "2d5", "Taobao" ] 完整示例 代码如下: <!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("T", "http://www.8939.org/json/json_demo_array.txt", true); xmlhttp.send();
</script>
<p>查看服务端数据 <a href="http://www.8939.org/json/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>
</body> </html> 【uniapp参考资料】 (1)uni-app跨平台开发 入门到实战 https://ke.qq.com/course/package/26512 (2)uni-app 完整商城界面设计实战 https://ke.qq.com/course/2381059 (3)基于vue的uniapp商城完整项目源代码 https://ke.qq.com/course/3064977 (4)毕业设计网 (5)小程序编程网 (6)计算机编程网 |
|
上一篇: 4.4.5 删除数组元素 | 下一篇: 4.6 JSON.stringify()转字符串 |