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常见问题整理(持续更新)
Aug 06 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
JS实现复制功能
Mar 01 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 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中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
js判断字符长度及中英文数字等
2014/03/19 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python格式化输出%s和%d
2018/05/07 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
水毁工程实施方案
2014/04/01 职场文书
实习单位评语
2014/04/26 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
清洁员岗位职责
2015/02/15 职场文书
公司员工培训管理制度
2015/08/04 职场文书
干部考核工作总结
2015/08/12 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
Vue h函数的使用详解
2022/02/18 Vue.js