jQuery解析Json实例详解


Posted in Javascript onNovember 24, 2015

本文实例讲述了jQuery解析Json的方法。分享给大家供大家参考,具体如下:

前言

在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换、JSON数据的解析是关键。

先明确2个概念例如:

JSON字符串:

var str1 = '{ "name": "deyuyi", "sex": "man" }';

JSON对象:
var str2 = { "name": "deluyi", "sex": "man" };

可以简单这样理解:

JSON对象是直接可以使用JQuery操作的格式,如C#中可以用对象(类名)点出属性(方法)一样;

JSON字符串仅仅只是一个字符串,一个整体,不截取的话没办法取出其中存储的数据,不能直接使用,除非你只想alert()他;

一、JSON字符串转换为JSON对象

要使用上面的str1,必须使用下面的方法先转化为JSON对象:

A:eval函数

eval函数可以直接将本质符合或者近似符合JSON格式的字符串转换为JSON对象,使用方式如:

eval('(' + str + ')'); //其中str就是满足本标题描述的字符串

//由JSON字符串转换为JSON对象
var str='{ "name": "John" }';
var obj = eval('(' + str + ')'); 
alert( obj.name);
var str2="{ 'name': 'John' }";
var obj2 = eval('(' + str2 + ')'); 
alert( obj2.name);
var str3="{ name: 'John' }";
var obj3 = eval('(' + str3 + ')'); 
alert( obj3.name);

以上均会输出结果“john”。

Eval方式可以转换以下标准和非标准格式字符串:

var str="{ 'name': 'John' }";
var str2='{ "name": "John" }';
var str3="{ name: 'John' }";

参见本例下载包中:JqueryDemo1.html

B:parseJSON函数

另一种将标准字符串转换为JSON对象的函数是parseJSON(),使用方式如jQuery.parseJSON(str)//其中str就是满足本标题描述的字符串

//由JSON字符串转换为JSON对象
var str='{ "name": "John" }';
var obj = jQuery.parseJSON(str)
alert("1"+ obj.name);

以上均会输出结果“john”。

此种方式仅支持标准格式:var str='{ "name": "John" }';

参见本例下载包中:JqueryDemo2.html

C:JSON.parse函数

还有一种将标准字符串转换为JSON对象的函数是JSON.parse(),使用方式如JSON.parse(str)//其中str就是满足本标题描述的字符串

var str = '{ "name": "mady", "age": "24" }';
var obj = JSON.parse(str);
alert(obj.name);

以上均会输出结果“john”。

此种方式仅支持标准格式:var str='{ "name": "John" }';

参见本例下载包中:JqueryDemo3.html

以上结果一致,均输出姓名,如下图:

 jQuery解析Json实例详解

特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。

D:Other方式

如果忍不住想犯错,十分十分想解析非标准、非正规字符串,如:

{name:mady,age:23}

或者
{name:'mady',age:23}

以及其他的你能想到的各种本质正确的非法格式,那么有扩展库可以解决

jquery-json 扩展库

下载地址在这里:http://code.google.com/p/jquery-json/

这个库用来扩展 jQuery ,对于 JSON 的使用,扩展了两个函数:toJSON和parseJSON

toJSON 函数用来将一个普通的 JavaScript 对象序列化为 JSON 对象。
parseJSON函数用来将一个普通的 JavaScript 对象序列化为 JSON 对象too。

var data=$.toJSON({ x: 2, y: 3 }); 
var obj = jQuery.parseJSON(data); 
alert(obj.x); 
var str = {plugin: 'jquery-json', version: 2.3}; 
var data2=$.toJSON(str); 
var obj2 = jQuery.parseJSON(data2); 
alert(obj2.plugin);

以上代码执行结果如:

 jQuery解析Json实例详解jQuery解析Json实例详解

参见本例下载包中:JqueryDemo5.html

二、将JSON对象转换为字符串

可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。
例如:

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);

三、解析读取JSON

我们通过各种方式将字符串转换为JSON对象后就是解析他了。
如上面的例子:

var str2 = { "name": "mady", "sex": "man" };

就可以这样读取:
alert(str2.name);//和C#一样直接往出点…

弹出” mady”。
我们遇到的JSON很少有这么简单的,比如复杂一点的JSON对象如:
var str={"GetUserPostByIdResult":{"Age":"33","ID":"2server","Name":"mady"}};

解析用:
      alert(str.GetUserPostByIdResult.Name);//一次点不出来,我多点几次
弹出:”mady”。

再再复杂一点的如:

var data=" { root: [ {'name':'6200','value':'0'}, {'name':'6101','value':'xa'}, {'name':'6102','value':'beijing'}, {'name':'6103','value':'haerbin'}]}";

如果你想单挑的话,解析用:
alert(dataObj.root[0].name);

弹出:“6200”。

如果你想群挑的话,解析用:

$.each(dataObj.root, function(index, item) {
  $("#info").append(
      "<div>" +index+":"+ item.name + "</div>" + 
      "<div>" +index+":"+ item.value + "</div><hr/>");
});

其中这个“#info”是个DIV的ID。输入结果如下图:

 jQuery解析Json实例详解

参见本例下载包中:JqueryDemo4.html

注意:本例如果要使用其他转换函数请更改字符串内单引号为双引号,外引号为单引号。
本文完整实例代码代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
javascript轮播图算法
Oct 21 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 #Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 #Javascript
jquery彩色投票进度条简单实例演示
Jul 23 #Javascript
js生成随机数的过程解析
Nov 24 #Javascript
jquery制作图片时钟特效
Mar 30 #Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 #Javascript
You might like
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php 生成文字png图片的代码
2011/04/17 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
由Javascript实现的页面日历
2011/11/04 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python如何生成xml文件
2020/06/04 Python
用python发送微信消息
2020/12/21 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
pip install命令安装扩展库整理
2021/03/02 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
法定代表人资格证明书
2014/09/11 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
电影建党伟业观后感
2015/06/01 职场文书
学术会议领导致辞
2015/07/29 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
什么是Python装饰器?如何定义和使用?
2022/04/11 Python