jquery JSON的解析方式示例介绍


Posted in Javascript onJuly 27, 2014

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

这里首先给出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://gaoyusi.blog.163.com/",{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); 

}); 
});
Javascript 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery提交多个表单的小技巧
Jul 27 #Javascript
用javascript对一个json数组深度赋值示例
Jul 27 #Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 #Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 #Javascript
jquery 取子节点及当前节点属性值
Jul 25 #Javascript
jquery text()方法取标签中的文本
Jul 25 #Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 #Javascript
You might like
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
Python基础入门之seed()方法的使用
2015/05/15 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
英语系本科生个人求职信
2013/09/21 职场文书
2014年大学生自我评价
2014/01/19 职场文书
元旦联欢会感言
2014/03/04 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
捐款仪式主持词
2015/07/04 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android