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代码压缩器
Oct 12 Javascript
js验证表单大全
Nov 25 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 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中与数组相关的函数
2007/03/22 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
js 走马灯简单实例
2013/11/21 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
python3中sys.argv的实例用法
2020/04/24 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
旅游个人求职信范文
2014/01/30 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
认识实习感想
2015/08/10 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
V Rising 服务器搭建图文教程
2022/06/16 Servers