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 相关文章推荐
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 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下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
Vue指令指令大全
2019/02/09 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
Tesserocr库的正确安装方式
2018/10/19 Python
利用python循环创建多个文件的方法
2018/10/25 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
为什么称python为胶水语言
2020/06/16 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
会计助理的岗位职责
2013/11/29 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL
Java Spring读取和存储详细操作
2022/08/05 Java/Android