溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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>";
$("h2").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"> <h2></h2> <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":"https://cache.yisu.com/upload/information/20200622/114/75314.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"
},{......});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
