jquery解析JSON数据示例代码


Posted in Javascript onMarch 17, 2014

这里可以找到json.js的代码,后面还需要formutil.js的代码及MD5.js

用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回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://www.phpzixue.cn/",{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); 
}); 
});

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。
Javascript 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
React中使用外部样式的3种方式(小结)
May 28 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
javascript事件函数中获得事件源的两种不错方法
Mar 17 #Javascript
javascript内置对象arguments详解
Mar 16 #Javascript
javascript跨浏览器的属性判断方法
Mar 16 #Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 #Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 #Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 #Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 #Javascript
You might like
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
jQuery事件详解
2017/02/23 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
Javascript的this详解
2019/03/23 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python for 循环获取index索引的方法
2019/02/01 Python
python 实现多维数组转向量
2019/11/30 Python
使用Python发现隐藏的wifi
2020/03/04 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
python实现逻辑回归的示例
2020/10/09 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
《改造我们的学习》心得体会
2014/11/07 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
学校团代会开幕词
2016/03/04 职场文书