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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
原生js实现轮播图特效
May 04 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
python中 * 的用法详解
2019/07/10 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
四风存在的原因分析
2014/02/11 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
入党培养人考察意见
2015/06/08 职场文书
老人院义工活动感想
2015/08/07 职场文书
军事理论课感想
2015/08/11 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
swagger如何返回map字段注释
2021/07/03 Java/Android
世界十大狙击步枪排行榜
2022/03/20 杂记