jquery JSON的解析方式


Posted in Javascript onJuly 25, 2009

这里考虑都考虑的是服务器返回的是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);

});
});

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。

Javascript 相关文章推荐
js遍历td tr等html元素
Dec 13 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
jqPlot Option配置对象详解
Jul 25 #Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 #Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 #Javascript
从父页面读取和操作iframe中内容方法
Jul 25 #Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 #Javascript
JavaScript中null与undefined分析
Jul 25 #Javascript
js 字符串操作函数
Jul 25 #Javascript
You might like
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
JS变量及其作用域
2017/03/29 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
解决python大批量读写.doc文件的问题
2018/05/08 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
护士进修自我鉴定
2014/02/07 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
解除租赁合同协议书
2016/03/21 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python