jQuery JSON的解析方式分享


Posted in Javascript onApril 05, 2011

等到问题解决了,也大致明白怎么个意思了,归根结底还是对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方法为例说明数据处理方法:
这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。
Javascript 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 #Javascript
基于jquery的动态创建表格的插件
Apr 05 #Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 #Javascript
新鲜出炉的js tips提示效果
Apr 03 #Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 #Javascript
dreamweaver 安装Jquery智能提示
Apr 02 #Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 #Javascript
You might like
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP中串行化用法示例
2016/11/16 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python3使用GUI统计代码量
2019/09/18 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
Python列表推导式实现代码实例
2020/09/09 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
读书之星事迹材料
2014/05/12 职场文书
经典禁毒标语
2014/06/16 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书