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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
基于JavaScript实现数码时钟效果
Mar 30 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
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
mysql时区问题
2008/03/26 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
Python学习小技巧之列表项的排序
2017/05/20 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
python 如何快速复制序列
2020/09/07 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
师德师风事迹材料
2014/12/20 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript