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 相关文章推荐
JavaScript实现的日期控件具体代码
Nov 18 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
js微信分享API
Oct 11 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
php无限极分类实现方法分析
2019/07/04 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
建筑横幅标语
2014/10/09 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js