JSON.parse()

JSON 教程 · 2019-04-08 19:57:05

JSON 通常用于与服务端交换数据。

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

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

语法

JSON.parse(text[, reviver])

参数说明:

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

JSON 解析实例

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

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

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

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

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

你可以使用我们的在线工具检测:http://www.codercto.com/tool/json_analysis.html

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

实例

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

从服务端接收 JSON 数据

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

实例

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", "/try/ajax/json_demo.txt", true); xmlhttp.send();

查看服务端数据: json_demo.txt

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

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

实例

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", "/try/ajax/json_demo_array.txt", true); xmlhttp.send();

查看服务端数据: json_demo_array.txt

异常

解析数据

JSON 不能存储 Date 对象。

如果你需要存储 Date 对象,需要将其转换为字符串。

之后再将字符串转换为 Date 对象。

实例

var text = '{ "name":"Codercto", "initDate":"2013-12-14", "site":"www.codercto.com"}'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

我们可以启用 JSON.parse 的第二个参数 reviver,一个转换结果的函数,对象的每个成员调用此函数。

实例

var text = '{ "name":"Codercto", "initDate":"2013-12-14", "site":"www.codercto.com"}'; var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value; }}); document.getElementById("demo").innerHTML = obj.name + "创建日期:" + obj.initDate;

解析函数

JSON 不允许包含函数,但你可以将函数作为字符串存储,之后再将字符串转换为函数。

实例

var text = '{ "name":"Codercto", "alexa":"function () {return 10000;}", "site":"www.codercto.com"}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + " Alexa 排名:" + obj.alexa();

不建议在 JSON 中使用函数。

浏览器支持

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

  • Firefox 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4

点击查看所有 JSON 教程 文章: https://codercto.com/courses/l/45.html

查看所有标签

来吧!带你玩转 Excel VBA

来吧!带你玩转 Excel VBA

罗刚君、杨嘉恺 / 电子工业出版社 / 2013-7 / 85.00元

本书旨在普及Excel VBA 基础理论,以及通过VBA 的高级应用扩展Excel 的功能,提升读者的制表效率,解决工作中的疑难,同时亦可借此开发商业插件。 本书主要分为操作自动化引言篇、入门篇、进阶篇和疑难解答篇,覆盖从入门到提高的所有内容,以满足不同层次的读者需求。其中操作自动化引言篇简述了操作自动化的需求与方式,借此引出VBA 入门篇。VBA 入门篇包含第2 章到第13 章,主要介绍了......一起来看看 《来吧!带你玩转 Excel VBA》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具