0

当我尝试从 GoogleBooksApi 获取数据时出现 404 not found 错误，因为缩略图不存在我尝试编写函数来检查缩略图是否存在，如果不存在则替换它，但仍然不起作用并且不显示另一本书，有什么问题？

function bookSearch() {
    var search = document.getElementById('search-box').value
    document.getElementById('results').innerHTML = ""
    const fictionCards = document.getElementById('fiction-cards');
        while(fictionCards.children && fictionCards.children.length) {
            fictionCards.removeChild(fictionCards.children[0]);
        }
    document.getElementById('type').classList = "hide-cards";
      $.ajax({
        url: "https://www.googleapis.com/books/v1/volumes?q=" + search,
        dataType: "json",

        success: function(data) {
            for (i = 0; i< data.items.length; i++){
                const extractThumbnail = ({ imageLinks }) => {
                    const DEFAULT_THUMBNAIL = "icons/logo.svg";
                    if (!imageLinks || !imageLinks.thumbnail) {
                      return DEFAULT_THUMBNAIL;
                    }
                    return imageLinks.thumbnail.replace("http://", "https://");
                  };
                const card = document.createElement('div');
                card.classList="card";
                document.getElementById('top-today').classList = 'hide-cards';
                //card content
                const content = `
                <h1>Fiction</h1>
                <div class="card" style="margin:50px; width: 18rem;">
                <img class="card-img-top align-items-center mx-auto" src="${extractThumbnail(data.items[i].volumeInfo)}" style="width:170px; height:230px;" alt="">
                <div class="card-body" id="results">
                    <h5 class="card-title" style="font-weight:bold">${data.items[i].volumeInfo.title}</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <div class="d-flex">
                    <a href="#" class="btn btn-dark mx-2"  style="height:2.5rem;">Add</a>
                    <a href="${data.items[i].saleInfo.buyLink}"class="btn btn-dark" style="height:2.5rem;">Buy</a>
                    </div>
                </div> `;
                results.innerHTML += content;
            }
        }, 

        type: 'GET'
    });
}
4

1 回答 1

0

您的图像逻辑正在运行。icons/logo.svg可能不在您正在测试它的环境中。更改icons/logo.svg为https://i.imgur.com/8UdKNS4.jpeg，它的工作原理。

对于您的第二个问题，您只得到一个结果的原因是因为 JavaScript 不知道id="results"它应该选择哪个。创建内容后，现在有两个id="results". 我将id="results"您的content变量更改为id="results_box"并得到了其余的结果。

function bookSearch() {
    var search = document.getElementById('search-box').value
    document.getElementById('results').innerHTML = ""
    const fictionCards = document.getElementById('fiction-cards');
        while(fictionCards.children && fictionCards.children.length) {
            fictionCards.removeChild(fictionCards.children[0]);
        }
    document.getElementById('type').classList = "hide-cards";
      $.ajax({
        url: "https://www.googleapis.com/books/v1/volumes?q=" + search,
        dataType: "json",

        success: function(data) {
            for (i = 0; i< data.items.length; i++){
                const extractThumbnail = ({ imageLinks }) => {
                    const DEFAULT_THUMBNAIL = "https://i.imgur.com/8UdKNS4.jpeg";
                    if (!imageLinks || !imageLinks.thumbnail) {
                      return DEFAULT_THUMBNAIL;
                    }
                    return imageLinks.thumbnail.replace("http://", "https://");
                  };
                const card = document.createElement('div');
                card.classList="card";
                document.getElementById('top-today').classList = 'hide-cards';
                //card content
                const content = `
                <h1>Fiction</h1>
                <div class="card" style="margin:50px; width: 18rem;">
                <img class="card-img-top align-items-center mx-auto" src="${extractThumbnail(data.items[i].volumeInfo)}" style="width:170px; height:230px;" alt="">
                <div class="card-body" id="results_box">
                    <h5 class="card-title" style="font-weight:bold">${data.items[i].volumeInfo.title}</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <div class="d-flex">
                    <a href="#" class="btn btn-dark mx-2"  style="height:2.5rem;">Add</a>
                    <a href="${data.items[i].saleInfo.buyLink}"class="btn btn-dark" style="height:2.5rem;">Buy</a>
                    </div>
                </div> `;
                results.innerHTML += content;
            }
        }, 

        type: 'GET'
    });
}

这是您的代码的工作版本： https ://jsfiddle.net/edvLpgct/2/

于 2022-02-02T06:19:02.930 回答