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函数
Jul 21 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
JavaScript网页定位详解
Jan 13 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
拖动时防止选中
Feb 03 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
vue实现数字滚动效果
Jun 29 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
Protoss魔法科技
2020/03/14 星际争霸
PHP 函数学习简单小结
2010/07/08 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
php商品对比功能代码分享
2015/09/24 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
JavaScript 原型继承
2011/12/26 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
用python实现学生管理系统
2020/07/24 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
医药营销个人求职信
2014/04/12 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
学习心理学的体会
2014/11/07 职场文书
表扬稿格式范文
2015/01/16 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
python 算法题——快乐数的多种解法
2021/05/27 Python
python中if和elif的区别介绍
2021/11/07 Python