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实现Sleep暂停功能代码
Sep 03 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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 UTF8 文件的签名问题
2009/10/30 PHP
php学习之function的用法
2012/07/14 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
东方通信股份有限公司VC面试题
2014/08/27 面试题
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
门诊手术室工作制度
2014/01/30 职场文书
2015毕业寄语大全
2015/02/26 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
2016教师节问候语
2015/11/10 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
js作用域及作用域链工作引擎
2022/07/07 Javascript