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 表单的友好用户体现
Jan 07 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
AngularJS实现多级下拉框
Mar 25 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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程序实现支持页面后退的两种方法
2008/06/30 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
低碳生活的宣传标语
2014/06/23 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
高中军训感想
2015/08/07 职场文书
Python入门之基础语法详解
2021/05/11 Python
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers