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插件教程
Aug 25 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
vue实现微信分享功能
Nov 28 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
create-react-app中添加less支持的实现
Nov 15 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中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
用Python3创建httpServer的简单方法
2018/06/04 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python实现电子词典
2020/03/03 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
Java基础面试题
2014/07/19 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
学生退学证明
2015/06/23 职场文书