使用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中文网其他相关文章！