使用JSONP API加載Flickr圖片

>本文上次更新2016年6月23日，具有代碼修訂，一個代碼epen演示和改進的格式。

flickr是一個用於共享照片和視頻的雅虎擁有的平台，它提供了一個公共API，以根據特定標準檢索照片列表。

>要接收JSON-Formatted API響應，請在您的請求中包含format=json參數。 例如，這將檢索標記為“小貓”的照片：

<code>https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json</code>

此Flickr API查詢不需要身份驗證。 可以在此處提供一個參數的完整列表： https://www.php.cn/link/link/b1370fcd515bccf46591ed09a543d21b 。

flickr json對象結構

典型的flickr json響應看起來像這樣：

用JSONP API

jsonFlickrFeed({
  "title": "Recent Uploads tagged kitten",
  "link": "http://www.flickr.com/photos/tags/kitten/",
  "description": "",
  "modified": "2016-06-19T09:32:56Z",
  "generator": "http://www.flickr.com/",
  "items": [
    {
      "title": "Portrait of Simba and Mogli",
      "link": "http://www.flickr.com/photos/112684907@N06/27665373772/",
      "media": {"m":"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg"},
      "date_taken": "2016-06-17T17:09:38-08:00",
      "description": " <p><a href="%5C%22http://www.flickr.com/people/112684907@N06/%5C%22">stefanhuber92 posted a photo: <p><a and='\"href=\"http://www.flickr.com/photos/112684907@N06/27665373772/\"' mogli='\"of=\"' simba='\"title=\"Portrait\"'><img alt='\"Portrait\"' and='\"height=\"240\"' mogli='\"of=\"' simba='\"src=\"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg\"'    style="max-width:90%"177\"'> ",
      "published": "2016-06-19T09:32:56Z",
      "author": "nobody@flickr.com (stefanhuber92)",
      "author_id": "112684907@N06",
      "tags": "pet cats cute eye animal animals cat tiere kitten siblings katze katzen fell haustier liebe tier gemütlich petlove geschwister kuscheln schön catlove süs petlover"
    },
    // ... 19 more items ...
  ]
})</a></p></a></p>

獲取Flickr圖像

JSON響應包裹在

函數中。 這使我們能夠將Flickr圖像集成到我們的網頁中：

jsonFlickrFeed

有關JSONP的更多信息，請參見：jQuery的JSONP用示例解釋了

function jsonFlickrFeed(json) {
  $.each(json.items, function(i, item) {
    $("<img  alt="使用JSONP API加載Flickr圖片" >").attr("src", item.media.m).appendTo("#images");
  });
};

$.ajax({
  url: 'https://api.flickr.com/services/feeds/photos_public.gne',
  dataType: 'jsonp',
  data: { "tags": "kitten", "format": "json" }
});

>

demo

在此處查看結果輸出：

請參閱codepen上的sitepoint（@sitepoint）的筆vkxzrz。

在API主頁上提供有關Flickr API的更多詳細信息。

>

常見問題（常見問題解答）

>本節回答了有關使用Flickr API加載照片的常見問題，涵蓋了諸如獲得正確的JSON對象，了解API密鑰，搜索照片，錯誤處理，顯示照片，上傳照片，上傳照片，分頁，元數據檢索，訪問用戶照片和API密鑰的必要性。 （保留了原始的常見問題解答部分，但為了簡潔而避免重複。）

以上是使用JSONP API加載Flickr圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！