javascript - 从 JSON 获取缩略图

Question

我需要此脚本才能从 Google API JSON 中提取缩略图，出于某种原因，它似乎无法正常工作。附上一个jsfiddle.l

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

Answer 1

在 API URL 中，您保留了 callback=handleResponses，但这仅适用于您在代码中声明了此类函数的情况。使用此参数，您将收到 JSONP(对该函数的 JS 调用)，而不是 JSON。

您可以删除它以获取 JSON(但在不支持 CORS 的旧版浏览器中它可能会失败)，或者作为 @squint建议，将 API URL 中的 callback=handleResponses 替换为 callback=?，让 jQuery 处理回调。

你还需要改变这个:

googleData[i].thumbnail

进入这个:

googleData[i].volumeInfo.imageLinks.thumbnail

Fixed JSFiddle