利用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请求servlet实现ajax异步请求的示例
Jun 03 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery实现计算器功能
Oct 19 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修改指定文件后缀的方法
2014/09/11 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
浅析node.js中close事件
2014/11/26 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JS hashMap实例详解
2016/05/26 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
军训自我鉴定
2014/01/22 职场文书
网络编辑职责
2014/03/01 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
李白故里导游词
2015/02/12 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js