從JSON獲取縮略圖

我需要此腳本才能從Google API JSON中拉出縮略圖，出於某種原因，它似乎並不奏效。附一的jsfiddle作爲wel.l從JSON獲取縮略圖

 <div id="book-shelf"> 

     </div> 
        $(function() { 
    var i=0; 
    var googleApi = "https://www.googleapis.com/books/v1/volumes?q=edgar+allan+poe"; 
    var googleData; 
    $.getJSON(googleApi, function(json) { 
     googleData = json; 

     setData() 
    }); 

    function setData(){ 
     var j = googleData.length > (i + 9) ? (i + 9) : googleData.length; 
     for (; i < j; i++) { 
      var googleThumb = googleData[i].thumbnail; 
      var img = $('<img style="width: 250px; height: 250px;" src="' + googleThumb + '"/>') 
      $('#book-shelf').append(img); 
     } 
    }  

    $('#load').click(function() { 
     setData(); 
    }); 
}); 



     https://jsfiddle.net/mo7skwrj/

來源

2016-05-23 JohnDotHR

定義* 「似乎並不奏效」 *。你做了什麼調試？開發者控制檯中有哪些錯誤？ – 2016-05-23 14:16:37

@squint我沒有收到任何錯誤。代碼應該從JSON獲取縮略圖，並將它們作爲圖像放置在＃書架中。 +編輯問題中的代碼。 – JohnDotHR

將'？'設置爲回調名稱，以便jQuery自動處理JSONP響應*（也就是說，如果您沒有創建自己的'handleResponses'函數）* ...'https://www.googleapis.com/ books/v1/volume？q = edgar + allan + poe＆callback =？' – 2016-05-23 14:22:08

在API網址，你離開callback=handleResponses，但如果你有這樣的代碼中聲明的函數，將只適用。有了這個參數，你會收到JSONP（對該函數的JS調用），而不是JSON。

你可以只刪除得到JSON（但它可能在不支持CORS傳統的瀏覽器失敗），或者，如@squint表明，隨着API URL callback=?更換callback=handleResponses，讓jQuery的處理回調。

你也需要改變這一點：

到這一點：

googleData[i].volumeInfo.imageLinks.thumbnail

Fixed JSFiddle

來源

2016-05-23 14:21:50 blex

完美，像魅力一樣工作。 @blex – JohnDotHR

@JohnDotHR：請注意，在不支持CORS的傳統瀏覽器中，這會失敗。這就是JSONP存在的原因。 – 2016-05-23 14:33:46

@squint感謝您的信息。我改變了我的答案，包括這一點。 – blex

從JSON獲取縮略圖

回答

相關問題