利用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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 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输出XML到页面的3种方法详解
2013/06/06 PHP
php ci框架验证码实例分析
2013/06/26 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
javascript求日期差的方法
2016/03/02 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
layui文件上传实现代码
2017/05/20 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
Pytorch之parameters的使用
2019/12/31 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
《识字五》教学反思
2014/03/01 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
党性心得体会
2014/09/03 职场文书
2015年调度员工作总结
2015/04/30 职场文书
火烧圆明园观后感
2015/06/03 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis