JSON的parse()方法介绍


Posted in Javascript onJanuary 31, 2019

parse()方法的介绍:

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

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

语法

JSON.parse(text[, reviver])

参数说明:

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

下面我们来看一个实例:

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

总结

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

Javascript 相关文章推荐
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
document.forms用法示例介绍
Jun 26 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
js保留两位小数方法总结
Jan 31 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
JSON.stringify()方法讲解
Jan 31 #Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 #Javascript
vue中的mvvm模式讲解
Jan 31 #Javascript
Vue和React组件之间的传值方式详解
Jan 31 #Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 #Javascript
async/await优雅的错误处理方法总结
Jan 30 #Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 #Javascript
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
模具设计与制造专业应届生求职信
2013/10/18 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
竞选村长演讲稿
2014/04/28 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
十七岁的单车观后感
2015/06/12 职场文书
信息简报范文
2015/07/21 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
python中如何对多变量连续赋值
2021/06/03 Python