一个JSON实例:jQuery解析JSON数据

开发 前端
JSON 是一种比较方便的数据形式。今天用JQuery 写了一个JSON的东西,用了 $.getJSON方法,获得JSON数据和解析 都挺方便简单的。

JSON 是一种比较方便的数据形式 具体的大家可以参考http://baike.baidu.com/view/136475.htm 还挺详细的。

今天用JQuery 写了一个JSON的东西,用了 $.getJSON方法,获得JSON数据和解析 都挺方便简单的。

从http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? 这个地址得到JSON数据 并且分析里面的结构,生成图片和相关链接等:

JS:

  1. $(function(){  
  2.         var url="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?" 
  3.         $.getJSON(     //使用getJSON方法取得JSON数据  
  4.         url,  
  5.         function(data){ //处理数据 data指向的是返回来的JSON数据  
  6.                 var tit="<a href='"+ data.link +"'>"+data.title +"<\/a>"//生成标题和标题连接  
  7.                 $("h1").html(tit);     //出现在指定位置H1 内  
  8.                 $("#ginfo").find("p").eq(0).html(data.modified);   
  9.                 $("#ginfo").find("p").eq(1).html(data.generator);  
  10.                 var lis="";    //li 列表项目  
  11.                 $(data.items).each(function(i,ite){     //遍历JSON数据得到所需形式  
  12.                     lis+="<li>";  
  13.                     lis+="<a href='"+ ite.link +"'><img src='"+ite.media.m +"' title='"+ ite.title +"'><\/><\/a>";  
  14.                     lis+="<div>";  
  15.                     lis+=ite.description;                  
  16.                     lis+="<\/div><\/li>";                  
  17.                     })  
  18.                 $("ul").html(lis);      //将遍历出来的数据呈现在所需位置  
  19.                 $("li").hover(function(){$(this).addClass("hov")}, function(){$(this).removeClass("hov")});      
  20.         }  
  21.         )  
  22.   })          

HTML:

  1. <div class="main"> 
  2.     <div class="ginfo" id="ginfo">      
  3.         <h1></h1> 
  4.         <p></p> 
  5.         <p></p> 
  6.    </div> 
  7.    <ul>         
  8.    </ul> 
  9. </div>    

最后说一下JSON数据的格式 其实它就是个文本文件,可以方便的解析 也可以直接 查看http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? 这个地址。

  1. ({        
  2.  "title": "Recent Uploads tagged cat",         
  3.  "link": "http://www.flickr.com/photos/tags/cat/",        "description": "",    
  4.       "modified": "2009-08-03T01:50:45Z",         
  5.  "generator": "http://www.flickr.com/",         
  6.  "items"    
  7.      {            
  8.   "title": "DSC06844",         
  9.      "link": "http://www.flickr.com/photos/g_bugel/3783605340/",              
  10. "media": {"m":"http://farm3.static.flickr.com/2638/3783605340_a3cfc9eeb9_m.jpg"},             
  11.  "date_taken": "2009-07-06T07:27:59-08:00",            
  12.  "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> ",           
  13.    "published": "2009-08-03T01:50:45Z",           
  14.    "author": "nobody@flickr.com (g.bugel)",           
  15.    "author_id": "38658309@N00",             
  16.    "tags": "china cat feline beijing 2009 chinalab chinalab2009"        
  17.  },{......}); 

点击这里查看DEMO 

原文链接:http://www.cnblogs.com/pifoo/archive/2011/05/21/Json-Example.html

【编辑推荐】

  1. 从零开始学习jQuery之Ajax快餐
  2. jQuery+Ajax+PHP+MySQL实现分类列表管理
  3. 推荐5款改善用户体验的jQuery插件
  4. 详解jQuery构造器的实现
  5. 从零开始学习jQuery之管理jQuery包装集
责任编辑:陈贻新 来源: pifoo的博客
相关推荐

2011-07-19 09:08:38

jQuery

2013-02-20 15:29:00

JSONAndroid开发

2010-07-06 10:07:10

jQueryJSON

2011-03-04 14:58:40

jqueryJSON

2019-03-25 15:00:38

工具代码测试

2022-06-28 08:17:10

JSON性能反射

2023-12-30 13:33:36

Python解析器JSON

2009-08-03 17:22:15

JSON解析

2009-07-23 10:51:20

jQuery调用Web返回JSON数据

2010-01-05 13:54:32

Jquery Json

2022-09-30 13:57:15

JSON解析C语言

2009-12-18 16:27:41

Ruby解析Json

2021-08-31 07:54:24

SpringMVC接口JSON

2013-03-27 10:51:44

iOSjson解析网络交互数据格式解析

2013-02-20 15:01:59

JSONAndroid开发

2021-04-28 07:22:13

HiveJson数组

2022-03-28 07:43:28

jsonHive数据库

2009-06-12 14:32:53

WCFJSON对象jQuery

2009-07-15 13:41:00

JDBC实例

2009-08-31 14:01:50

C#创建一个文件
点赞
收藏

51CTO技术栈公众号