从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获取缩略图

回答

相关问题