用JQuery解析擷取JSON資料

標籤：items   tor   odi   ref   move   callback   mod   標題   class   

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": "[email protected] (g.bugel)",            "author_id": "[email protected]",            "tags": "china cat feline beijing 2009 chinalab chinalab2009"      },{......});

 

用JQuery解析擷取JSON資料