flickr api搜索不顯示圖像

當我單擊搜索按鈕並在螢火蟲中查看net標籤時，它顯示JSON對象正在返回，但我無法讓它們加載到我的瀏覽器中查看。如果我把「var url」的部分放在地址欄中，它也可以工作。我認爲這個錯誤可能與最後一個功能有關，但我無法弄清楚。flickr api搜索不顯示圖像

<!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>

來源

2015-07-12 user5108240

代碼工作並執行的請求。但是Flicks的答案不是有效的JSON：''jsonFlickrApi（{「photos」：{「page」：1，「pages」：12207，「perpage」：25，「total」：「305156」，「photo」：[ { 「ID」：「19639656861」，「主人」：「30271324 @ N07」，「祕密」：「0280357dc4」，「服務器」：「260」，「農場」：1，「稱號」：「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」;'移除函數包裝器...仍然不工作壽。 – user5108240

看來Flickr API已被更改，您的示例已過時。

您只需要調查使用Google Chrome開發者控制檯或使用斷點和手錶的API來自哪些數據。

enter image description here

有一個工作段：

$(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>

來源

2015-07-12 16:54:47

它很好用，並感謝您的詳細回覆。你不會相信我，但我很快就知道了，並且回到這裏來發布它，但是你的迴應看起來比我所做的任何事都要好。再次感謝/ – user5108240

flickr api搜索不顯示圖像

回答

相關問題