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模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
js实现时钟定时器
Mar 26 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP session会话的安全性分析
2011/09/08 PHP
微信支付开发发货通知实例
2016/07/12 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Python函数参数操作详解
2018/08/03 Python
django富文本编辑器的实现示例
2019/04/10 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
采购文员岗位职责
2013/11/20 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
违反交通法规检讨书
2014/09/10 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android