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:// (g.bugel)", "author_id": "38658309@N00", "tags": "china cat feline beijing 2009 chinalab chinalab2009" },{......});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。