JSON的parse()方法介绍

 更新时间:2019年01月31日 10:39:20   作者:mumu1998  
今天小编就为大家分享一篇关于JSON的parse()方法介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

parse()方法的介绍:

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

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

语法

JSON.parse(text[, reviver])

参数说明:

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

下面我们来看一个实例:

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

首先通过parse()方法将JSON数据转换为JavaScript对象,

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

从服务端接收 JSON 数据(数组JSON数据)

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

eg:
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 不能存储 Date 对象。如果你需要存储 Date 对象,需要将其转换为字符串。之后再将字符串转换为 Date 对象。

<p id="demo"></p>
<script>      //将字符串转换为data对象
var text = '{ "name":"csdn", "initDate":"2018-12-14", "site":www.jb51.net}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;
</script>

这时我们可以启用JSON的第二个参数:

<p id="demo"></p>
<script>
var text = '{ "name":"csdn", "initDate":"2018-12-14", "site":"www.jb51.net"}';
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":"jb51", "alexa":"function () {
return 10000;}",
"site":"www.jb51.net"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");      注意:最好不要在json中使用函数
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名:" + obj.alexa();

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • 文本框中,回车键触发事件的js代码[多浏览器兼容]

    文本框中,回车键触发事件的js代码[多浏览器兼容]

    在文本框中输入完内容后,经常需要按回车,焦点跳到下个文本框,或者触发按钮事件
    2010-06-06
  • JS组件Bootstrap Table布局详解

    JS组件Bootstrap Table布局详解

    这篇文章主要为大家详细介绍了JS组件Bootstrap Table布局,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下
    2016-05-05
  • JS前端笔试题分析

    JS前端笔试题分析

    这篇文章主要介绍了JS前端笔试题,结合实例形式分析了javascript字符串、数组及日期操作相关技巧,需要的朋友可以参考下
    2016-12-12
  • JavaScript中setter和getter方法介绍

    JavaScript中setter和getter方法介绍

    这篇文章主要介绍了JavaScript中setter和getter方法介绍的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    这篇文章主要介绍了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,涉及鼠标事件及页面元素结点的遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 如何用JS判断数组中是否存在某个值或者某个对象的值

    如何用JS判断数组中是否存在某个值或者某个对象的值

    数组是我们编程中经常使用的的数据结构之一,在处理数组时,我们经常需要在数组中查找特定的值,下面这篇文章主要给大家介绍了关于如何用JS判断数组中是否存在某个值或者某个对象的值的相关资料,需要的朋友可以参考下
    2023-01-01
  • 微信小程序 如何获取网络状态

    微信小程序 如何获取网络状态

    这篇文章主要介绍了微信小程序 如何获取网络状态,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 微信小程序数据劫持代理的实现

    微信小程序数据劫持代理的实现

    本文主要介绍了微信小程序 数据劫持代理的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 前端云原生之微信小程序云服务配置指南

    前端云原生之微信小程序云服务配置指南

    前端边界又拓宽,走进火热的云原生云开发赛道,随着云原生时代的到来,各大厂纷纷上云,下面这篇文章主要给大家介绍了关于前端云原生之微信小程序云服务配置的相关资料,需要的朋友可以参考下
    2022-05-05
  • 微信小程序实现多张照片上传功能

    微信小程序实现多张照片上传功能

    这篇文章主要介绍了微信小程序实现多张照片上传功能,当服务器的状态码为200且图片上传完毕后将图片的src转化为Json字符串存在数组中以便将其添加到数据库,本文通过实例代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03

最新评论