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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
js constructor的实际作用分析
Nov 15 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
开发大型 PHP 项目的方法
2007/01/02 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
接口可以包含哪些成员
2012/09/30 面试题
大学生党员自我批评
2014/02/14 职场文书
北京奥运会主题口号
2014/06/13 职场文书
煤矿安全协议书
2014/08/20 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
肖申克救赎观后感
2015/06/02 职场文书
师范生见习总结范文
2015/06/23 职场文书
开学第一周总结
2015/07/16 职场文书
python实现简单的三子棋游戏
2022/04/28 Python