jQuery怎么解析Json字符串(Json格式/Json对象)


Posted in Javascript onAugust 09, 2013

json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法。

我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。

上例中得到的JSON数据如下,是一个嵌套JSON:

{
 "comments": [
  {
   "content": "很不错嘛",
   "id": 1,
   "nickname": "纳尼"
  },
  {
   "content": "哟西哟西",
   "id": 2,
   "nickname": "小强"
  }
 ]
}

获取JSON数据,在jQuery中有一个简单的方法 $.getJSON() 可以实现。

下面引用的是官方API对$.getJSON()的说明:

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )
urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回调函数中接受三个参数,第一个书返回的数据,第二个是状态,第三个是jQuery的XMLHttpRequest,我们只使用到第一个参数。

$.each()是用来在回调函数中解析JSON数据的方法,下面是官方文档:

jQuery.each( collection, callback(indexInArray, valueOfElement) )
collectionThe object or array to iterate over.

callback(indexInArray, valueOfElement)The function that will be executed on every object.

$.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当前遍历的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {
 $.getJSON("loadInfo", function(data) {
  $("#info").html("");//清空info内容
  $.each(data.comments, function(i, item) {
   $("#info").append(
     "<div>" + item.id + "</div>" + 
     "<div>" + item.nickname + "</div>" +
     "<div>" + item.content + "</div><hr/>");
  });
  });
}

正如上面,loadinfo是请求的地址,function(data){...}就是在请求成功后的回调函数,data封装了返回的JSON对象,在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到达JSON数据内包含的JSON数组:

[
 {
  "content": "很不错嘛",
  "id": 1,
  "nickname": "纳尼"
 },
 {
  "content": "哟西哟西",
  "id": 2,
  "nickname": "小强"
 }
]

$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。

上例的运行结果如下:

jQuery怎么解析Json字符串(Json格式/Json对象)

如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:

{
 "comments": [
  {
   "content": "很不错嘛",
   "id": 1,
   "nickname": "纳尼"
  },
  {
   "content": "哟西哟西",
   "id": 2,
   "nickname": "小强"
  }
 ],
 "content": "你是木头人,哈哈。",
 "infomap": {
  "性别": "男",
  "职业": "程序员",
  "博客": "http://www.cnblogs.com/codeplus/"
 },
 "title": "123木头人"
}

js如下:

function loadInfo() {
 $.getJSON("loadInfo", function(data) {
  $("#title").append(data.title+"<hr/>");
  $("#content").append(data.content+"<hr/>");
  //jquery解析map数据
  $.each(data.infomap,function(key,value){
   $("#mapinfo").append(key+"----"+value+"<br/><hr/>");
  });
  //解析数组
  $.each(data.comments, function(i, item) {
   $("#info").append(
     "<div>" + item.id + "</div>" + 
     "<div>" + item.nickname + "</div>" +
     "<div>" + item.content + "</div><hr/>");
  });
  });
}

值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,十分方便。

上例的运行效果:

jQuery怎么解析Json字符串(Json格式/Json对象)

jQuery很强大,so...更多的了解还得参考文档,(ˇˍˇ) 想~

下面是其他网友的补充:

一、jQuery解析Json数据格式:

使用这种方法,你必须在Ajax请求中设置参数:
1 dataType: "json"
获取通过回调函数返回的数据并解析得到我们想要的值,看源码:

jQuery.ajax({ 
url: full_url, 
dataType: "json", 
success: function(results) { 
alert(result.name); 
} });

通常情况下,你可以从后台返回JSON数据,前台就交给jQuery啦,哈哈!!
jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不
需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为
例说

例1
代码如下:

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

$.getJSON("http://sanic.cnblogs.com/",{param:"sanic"},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); 
}); 
});

二、jQuery解析Json对象:

jQuery提供了另一种方法“parseJSON”,这需要一个标准的JSON字符串,并返回生成的JavaScript对象。让我们来看
看语法:

data = $.parseJSON(string);
看看它是如何运用的到实际开发中的:

jQuery.ajax({ 
url: dataURL, success: function(results) { 
var parsedJson = jQuery.parseJSON(results); 
alert(parsedJson.name); 
} 
});
Javascript 相关文章推荐
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
JavaScript 空间坐标的使用
Aug 19 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 #Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 #Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 #Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 #Javascript
jquery 实现上下滚动效果示例代码
Aug 09 #Javascript
15条JavaScript最佳实践小结
Aug 09 #Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 #Javascript
You might like
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php获取系统变量方法小结
2015/05/29 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
python实现xlsx文件分析详解
2018/01/02 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python用for循环求和的方法总结
2019/07/08 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
python中for in的用法详解
2020/04/17 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
导师工作推荐信
2015/03/27 职场文书
在职证明范本
2015/06/15 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Python中requests做接口测试的方法
2021/05/30 Python
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers