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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
微信小程序云开发之数据库操作
May 18 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
php微信开发之音乐回复功能
2018/06/14 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
js计算任意值之间随机数的方法
2015/01/16 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
JS实现页面内跳转的简单代码
2017/09/03 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
js实现导航跟随效果
2018/11/17 Javascript
python里使用正则的findall函数的实例详解
2017/10/19 Python
浅谈Python NLP入门教程
2017/12/25 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
什么是封装
2013/03/26 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
省三好学生申请材料
2014/01/22 职场文书
大学社团计划书
2014/05/01 职场文书
实验室标语
2014/06/21 职场文书
合同意向书范本
2014/07/30 职场文书
学校创先争优活动总结
2014/08/28 职场文书
避暑山庄导游词
2015/02/04 职场文书
2015年医药代表工作总结
2015/04/25 职场文书