使用JSONP API加载Flickr图片

本文于2016年6月23日更新。特别是：修改了代码示例，添加了CodePen演示并修复了格式问题。

Flickr是Yahoo拥有的领先图像和视频托管网站。 他们提供了一个公共API，可用于返回符合特定条件的照片列表。

要以JSON格式返回API响应，您可以在请求中发送参数format ，其值为json 。 例如，以下内容将返回标记为“小猫”的照片列表。

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

这种查询Flickr API的方法不需要身份验证。 您可以在此处找到可能的参数列表： https : //www.flickr.com/services/api/flickr.photos.search.html 。

典型的Flickr JSON对象

这是典型的Flickr JSON对象的样子：

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=\"http://www.flickr.com/people/112684907@N06/\">stefanhuber92<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/112684907@N06/27665373772/\" title=\"Portrait of Simba and Mogli\"><img src=\"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg\" width=\"177\" height=\"240\" alt=\"Portrait of Simba and Mogli\" /><\/a><\/p> ",
      "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
    ...
  ]
})

使用JSONP API加载Flickr图片

如您所见，JSON响应包装在jsonFlickrFeed函数中。 我们可以使用它从Flickr中提取图片，并将其显示在我们的网页上，如下所示：

function jsonFlickrFeed(json) {
  $.each(json.items, function(i, item) {
    $("<img />").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" }
});

如果您想了解有关JSONP的更多信息，请阅读： jQuery的JSONP附带示例

演示版

这就是我们最终得到的结果。

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen vKXZrz 。

您可以在API主页上阅读有关Flickr API的更多信息。

From: https://www.sitepoint.com/load-flickr-photos-using-jsonapi/