13

尝试修改 $.getJSON Flickr 示例：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data){
    $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).appendTo("#images");
        if ( i == 3 ) return false;
    });
});

从 flickr.photos.search REST API 方法读取，但此调用的 JSON 响应不同。

这是我到目前为止所做的：

var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
    $.each(data.photos, function(i,item){
        src = "http://farm"+ item.photo.farm +".static.flickr.com/"+ item.photo.server +"/"+ item.photo.id +"_"+ item.photo.secret +"_m.jpg";
        $("<img/>").attr("src", src).appendTo("#images");
        if ( i == 3 ) return false;
    });
});

我想我没有正确构建图像 src。根据 JSON 响应的内容，找不到任何关于如何构建图像 src 的文档。您如何解析 flickr.photos.search REST API 调用？

4

4 回答 4

25

没关系，我明白了。对于那些感兴趣的人，它的解析如下：

var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
$.getJSON(url + "&format=json&jsoncallback=?", function(data){
    $.each(data.photos.photo, function(i,item){
        src = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg";
        $("<img/>").attr("src", src).appendTo("#images");
        if ( i == 3 ) return false;
    });
});

请注意 .photo 已移至 $.each 方法签名。

于 2010-03-25T08:48:15.607 回答
5

这可以通过选择 'url_m' extras 参数和 per_page 参数来简化......

extras=url_m&per_page=4

那么你所需要的就是在循环中......

$("<img/>").attr("src", item.url_m).appendTo("#images");
于 2012-02-27T10:55:52.663 回答
3

要访问 Flickr API，您必须使用https: //：

var url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20";
var src;
于 2015-03-13T23:07:57.077 回答
2

jQuery.getJSON() 的 jQuery API 文档在这里有一个有用的示例：http: //api.jquery.com/jquery.getjson/

该文档提供了一个完整的文件作为如何解析 API 调用的示例；它从 Flickr JSONP API 加载四张最近的雷尼尔山图片。我将在此处重新打印该文件，作为可能有用的附加上下文，特别是对于那些刚开始使用 API 的人。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="images"></div>

<script>
(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();
</script>

</body>
</html>
于 2015-10-21T05:19:27.060 回答