首页
会员中心
到顶部
到尾部
CSS教程

JSON.parse()

时间:2020/11/2 12:57:59  作者:  来源:  查看:0  评论:0
内容摘要:JSON.parse()JSON 数据类型JSON 字符串化JSON 的常规用途是同 web 服务器进行数据传输。在从 web 服务器接收数据时,数据永远是字符串。通过 JSON.parse() 解析数据,这些数据会成为 JavaScript 对象。实例 – 解析 JSON请想象...

JSON.parse()

JSON 的常规用途是同 web 服务器进行数据传输。

在从 web 服务器接收数据时,数据永远是字符串。

通过 JSON.parse() 解析数据,这些数据会成为 JavaScript 对象。

实例 – 解析 JSON

请想象一下我们从 web 服务器接收到这段文本:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

请使用 JavaScript 函数 JSON.parse() 把文本转换为 JavaScript 对象:

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

请确保这段文本以 JSON 格式书写,否则会出现语法错误。

请在您的页面中使用 JavaScript 对象:

实例

<p id="demo"></p> <script> document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; </script>

亲自试一试

来自服务器的 JSON

您能够通过使用 AJAX 请求从服务器请求 JSON。

只要服务器的响应是用 JSON 格式编写的,你可以将字符串解析成 JavaScript 对象。

实例

请使用 XMLHttpRequest 从服务器获取数据:

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_demo.txt", true);xmlhttp.send();

亲自试一试

查看 json_demo.txt

作为 JSON 的数组

在对衍生自数组的 JSON 使用 JSON.parse() 后,此方法将返回 JavaScript 数组,而不是 JavaScript 对象。

实例

从服务器返回的 JSON 是数组:

var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function()  {    if (this.readyState == 4 && this.status == 200) {        myArr =  JSON.parse(this.responseText);        document.getElementById("demo").innerHTML  = myArr[0];    }};xmlhttp.open("GET", "json_demo_array.txt", true);xmlhttp.send();

亲自试一试

查看 json_demo_array.txt

例外

解析日期

JSON 中不允许日期对象。

如果您需要包含日期,请写为字符串。

之后您可以将其转换回日期对象:

实例

把字符串转换为日期:

var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';var obj = JSON.parse(text);obj.birth = new Date(obj.birth); document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

亲自试一试

或者您可以已使用 JSON.parse() 函数的第二个参数,被称为 reviver

这个 reviver 参数是函数,在返回值之前,它会检查每个属性。

实例

将字符串转换为日期,使用 reviver 函数:

var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';var obj = JSON.parse(text, function (key, value) {    if  (key == "birth") {        return new Date(value);    } else {         return value;   }}); document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

亲自试一试

解析函数

JSON 中不允许函数。

如果您需要包含函数,请把它写作字符串。

稍后您可以把它转换回函数:

实例

把字符串转换为函数:

var text =  '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';var obj = JSON.parse(text);obj.age = eval("(" + obj.age + ")"); document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

亲自试一试

您应该避免在 JSON 中使用函数,函数会丢失它们的作用域,而且您还需要使用 eval() 把它们转换回函数。

浏览器支持

所有主流浏览器以及最新的 ECMAScript (JavaScript) 标准均包含 JSON.parse() 函数:

下表中的数字指定了完全支持 JSON.parse() 函数的首个浏览器版本:

Yes8.03.54.010.0

对于更老的浏览器,以下地址中的 JavaScript 库是可用的:

https://github.com/douglascrockford/JSON-js



上一篇:JSON 简介
下一篇:JSON 数组
相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号