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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
JS 继承实例分析
Nov 04 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
php时间戳转换代码详解
2019/08/04 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python中有函数重载吗
2020/05/28 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
光荣入党自我鉴定
2014/01/22 职场文书
单位工作证明格式模板
2014/10/04 职场文书
黄河绝恋观后感
2015/06/08 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
sql中mod()函数取余数的用法
2021/05/29 SQL Server
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript