利用jQuery解析获取JSON数据


Posted in jQuery onApril 08, 2017

JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的。从http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? 这个地址得到JSON数据 并且分析里面的结构,生成图片和相关链接等:

复制代码

$(function(){
  var url="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
   //使用getJSON方法取得JSON数据
  $.getJSON(
  url,
  //处理数据 data指向的是返回来的JSON数据
  function(data){
    //生成标题和标题连接
    var tit="<a href='"+ data.link +"'>"+data.title +"<\/a>";
    $("h1").html(tit); 

    //出现在指定位置H1 内
    $("#ginfo").find("p").eq(0).html(data.modified);
    $("#ginfo").find("p").eq(1).html(data.generator);
    var lis="";  
    //li 列表项目
    $(data.items).each(function(i,ite){  
     //遍历JSON数据得到所需形式
     lis+="<li>";
     lis+="<a href='"+ ite.link +"'><img src='"+ite.media.m +"' title='"+ ite.title +"'><\/><\/a>";
     lis+="<div>";
     lis+=ite.description; 
     lis+="<\/div><\/li>";  
     })
    $("ul").html(lis); 
    //将遍历出来的数据呈现在所需位置
    $("li").hover(function(){$(this).addClass("hov")}, function(){$(this).removeClass("hov")}); 
  }
  )
 })

HTML:

<div class="main">
 <div class="ginfo" id="ginfo"> 
  <h1></h1>
  <p></p>
  <p></p>
 </div>
 <ul>  
 </ul>
</div>

最后说一下JSON数据的格式,其实它就是个文本文件,可以方便的解析,也可以直接查看。

({
  "title": "Recent Uploads tagged cat",
  "link": "http://www.flickr.com/photos/tags/cat/",
  "description": "",
  "modified": "2009-08-03T01:50:45Z",
  "generator": "http://www.flickr.com/",
  "items"  {
   "title": "DSC06844",
   "link": "http://www.flickr.com/photos/g_bugel/3783605340/",
   "media": {"m":"http://farm3.static.flickr.com/2638/3783605340_a3cfc9eeb9_m.jpg"},
   "date_taken": "2009-07-06T07:27:59-08:00",
   "description": "<p><a href=\"http://www.flickr.com/people/g_bugel/\">g.bugel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/g_bugel/3783605340/\" title=\"DSC06844\"><img src=\"http://farm3.static.flickr.com/2638/3783605340_a3cfc9eeb9_m.jpg\" width=\"240\" height=\"180\" alt=\"DSC06844\" /><\/a><\/p> ",
   "published": "2009-08-03T01:50:45Z",
   "author": "nobody@flickr.com (g.bugel)",
   "author_id": "38658309@N00",
   "tags": "china cat feline beijing 2009 chinalab chinalab2009"  
},{......});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery异步提交表单实例
May 30 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
You might like
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python自动生产表情包
2017/03/17 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
pytorch简介
2020/11/11 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
css3的transition属性详解
2014/12/15 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
班组长工作职责
2013/12/25 职场文书
关于旷工的检讨书
2014/02/02 职场文书
优良学风班申请材料
2014/02/13 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
先进党支部事迹材料
2014/12/24 职场文书
委托书英文
2015/01/28 职场文书
2015年元宵节活动总结
2015/02/06 职场文书