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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 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
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
JS之小练习代码
2008/10/12 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python和ruby,我选谁?
2017/09/13 Python
django 自定义过滤器的实现
2019/02/26 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
python从PDF中提取数据的示例
2020/10/30 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
高山背包:High Sierra
2017/11/23 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
.net开发工程师面试题
2014/02/25 面试题
安全教育心得体会
2013/12/29 职场文书
材料化学专业求职信
2014/07/15 职场文书
调解书格式范本
2015/05/20 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
Python快速优雅的批量修改Word文档样式
2021/05/20 Python