flickr api搜索不显示图像答案

【问题标题】：flickr api search not displaying imagesflickr api搜索不显示图像
【发布时间】：2015-09-30 21:52:34
【问题描述】：

当我单击搜索按钮并在 firebug 中查看 net 选项卡时，它显示 JSON 对象正在返回，但我无法将它们加载到我的浏览器中查看。如果我将“var url”的部分拼凑到地址栏中，它也可以工作。我认为错误可能与最后一个函数有关，但我无法弄清楚。

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">     
  <style>
  img {
    height: 100px;
    float: left;
  }
  #images{
    width: 100%;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>   
</head>
<body>
    <input type="text" id="flickrInput">
    <button id="flickrSearch">Search Photos</button>
    <div id="images"></div>      
<script>
  $(document).ready(function () {
    $("#flickrSearch").click(function (event) {
      var searchVal = $("#flickrInput").val();
      var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a";
      $.getJSON( flickrAPI, {
        tags: searchVal,
        per_page: 25,
        format: "json"
      },  
        function( data ) {
        $.each( data.items, function( i, item ) {
          var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
         $('#images').append('<img src="' + url + '"/>');
       });
     });
  });    
});
</script>
</body>
</html>

【问题讨论】：

代码正在运行并执行请求。但 Flicks 的答案不是有效的 JSON："jsonFlickrApi({"photos":{"page":1,"pages":12207,"perpage":25,"total":"305156","photo":[{"id":"19639656861","owner":"30271324@N07","secret":"0280357dc4","server":"260","farm":1,"title":"193_12.07.2015_Sommer","ispublic":1,"isfriend":0,"isfamily":0}/*, ...*/]},"stat":"ok"})"。好像API已经改了，例子失效了。
好的，我将 var flickrAPI 更改为 var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a&nojsoncallback=1"; 以删除函数包装器...仍然无法正常工作。

标签： jquery ajax each getjson flickr

【解决方案1】：

似乎 Flickr API 已更改，您的示例已过时。

您只需要使用 Google Chrome 开发者控制台或使用断点和监视来调查来自 API 的哪些数据。

有一个工作的sn-p：

  $(document).ready(function () {
    $("#flickrSearch").click(function (event) {
      var searchVal = $("#flickrInput").val();
      var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=dd4a16666bdf3c2180b43bec8dd1534a&nojsoncallback=1";
      $.getJSON( flickrAPI, {
        tags: searchVal,
        per_page: 25,
        format: "json"
      },  
        function( data ) {
        $.each( data.photos.photo, function( i, item ) {
          var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
         $('#images').append('<img src="' + url + '"/>');
       });
     });
  });    
});

  img {
    height: 100px;
    float: left;
  }
  #images{
    width: 100%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="flickrInput">
    <button id="flickrSearch">Search Photos</button>
    <div id="images"></div>

【讨论】：

效果很好，感谢您的详细回复。你不会相信我，但我在片刻之前就想通了，然后回来在这里发布它，但你的回复看起来比我所做的任何事情都要好。再次感谢/