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实现控制台控件的代码
Sep 04 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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
escape unescape的php下的实现方法
2007/04/27 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
微信小程序开发技巧汇总
2019/07/15 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Django与遗留的数据库整合的方法指南
2015/07/24 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
如何利用python进行时间序列分析
2020/08/04 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python eval函数原理及用法解析
2020/11/14 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
《满井游记》教学反思
2014/02/26 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS