jquery JSON的解析方式示例介绍


Posted in Javascript onJuly 27, 2014

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

}); 
});
Javascript 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
详解vue中axios的封装
Jul 18 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
原生JS实现留言板功能
Feb 08 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
jQuery提交多个表单的小技巧
Jul 27 #Javascript
用javascript对一个json数组深度赋值示例
Jul 27 #Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 #Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 #Javascript
jquery 取子节点及当前节点属性值
Jul 25 #Javascript
jquery text()方法取标签中的文本
Jul 25 #Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 #Javascript
You might like
服务器端解压缩zip的脚本
2006/12/22 PHP
关于尾递归的使用详解
2013/05/02 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
js中new一个对象的过程
2017/02/20 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
ios中视频的最后一桢问题解决
2019/05/14 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
银行开业庆典方案
2014/02/06 职场文书
促销活动总结范文
2014/04/30 职场文书
会计实训总结范文
2015/08/03 职场文书