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的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
koa-router源码学习小结
Sep 07 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
Vue.js仿Select下拉框效果
2020/02/18 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
欧克利英国官网:Oakley英国
2019/08/24 全球购物
《春晓》教学反思
2014/04/20 职场文书
2014年小学工作总结
2014/11/26 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
员工手册编写范本
2015/05/14 职场文书
趣味运动会赞词
2015/07/22 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL