jquery中JSON的解析方式


Posted in Javascript onMarch 16, 2015

考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明。

var data=" 

{ 

root: 

[ 

{name:'1',value:'0'}, 

{name:'6101',value:'西安市'}, 

{name:'6102',value:'铜川市'}, 

{name:'6103',value:'宝鸡市'}, 

{name:'6104',value:'咸阳市'}, 

{name:'6105',value:'渭南市'}, 

{name:'6106',value:'延安市'}, 

{name:'6107',value:'汉中市'}, 

{name:'6108',value:'榆林市'}, 

{name:'6109',value:'安康市'}, 

{name:'6110',value:'商洛市'} 

] 

}";

这里以jquery异步获取的数据类型——json对象和字符串为依据,分别介绍两种方式获取到的结果处理方式。

1.对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:

var dataObj=eval("("+data+")");//转换为json对象 

alert(dataObj.root.length);//输出root的子对象数量 

$.each(dataObj.root,fucntion(idx,item){ 

if(idx==0){ 

return true; 

}

//输出每个root子对象的名称和值 

alert("name:"+item.name+",value:"+item.value); 

})

注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。

2.对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说明数据处理方法:

$.getJSON("http://user.qzone.qq.com/2227211070",{param:"gaoyusi"},function(data){ 

//此处返回的data已经是json对象 

//以下其他操作同第一种情况 

$.each(data.root,function(idx,item){ 

if(idx==0){ 

return true;//同countinue,返回false同break 

}

alert("name:"+item.name+",value:"+item.value);

}); 

});

以上就是本文关于jQuery解析json的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
seajs下require书写约定实例分析
May 16 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
浅谈js中的闭包
Mar 16 #Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 #Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 #Javascript
JavaScript中的DSL元编程介绍
Mar 15 #Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 #Javascript
Javascript中的arguments与重载介绍
Mar 15 #Javascript
JavaScript中的闭包介绍
Mar 15 #Javascript
You might like
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
简单了解OpenCV是个什么东西
2017/11/10 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python中二分查找法的实现方法
2020/12/06 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
转党组织关系介绍信
2014/01/08 职场文书
满月酒答谢词
2014/01/14 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
农村门前三包责任书
2014/07/25 职场文书
身边的榜样活动方案
2014/08/20 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
小学新教师个人总结
2015/02/05 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
亲戚关系证明
2015/06/24 职场文书
2015大一新生军训感言
2015/08/01 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js