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 29 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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对二维数组按指定键值key排序示例代码
2013/11/26 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
python任务调度实例分析
2015/05/19 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
百年校庆节目主持词
2014/03/27 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
黄埔军校观后感
2015/06/10 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
python中if和elif的区别介绍
2021/11/07 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript