时间戳

首页 > 解决方案 > .innerHTML（使用 Ajax）未在网页中显示结果

javascript - .innerHTML（使用 Ajax）未在网页中显示结果

问题描述

我正在尝试使用 Google Books API 做一个显示查询结果的网络应用程序。我的代码正在运行，但 .innerHTML 没有在 Html 页面上显示任何结果。这是我正在使用的 Html。

<!DOCTYPE html>
<!-- -->
<html>
    <head>
        <title>Google Books API Search</title>

        <!--linkink stylesheet-->
        <link rel="stylesheet" href="css/main.css">


    </head>
    <body>

        <div id="search" class="#f5f5f5 grey lighten-4 z-depth-5">
             <form id="bookForm">
                <div class="inputField">
                <input type="search" id="books">
                <label for="search">Search for books</label>
                </div> 
                 <div class="btnHolder">
                     <button id="button" class="btn red">Search</button>
                 </div> 
            </form>
        </div>

        <div id="results">


        </div>

        <!--linking scripts-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

这是正在运行的 JavaScript 代码。

/*global document, $, console, event, results */

function bookSearch() {
    /* eslint-disable no-console */
    event.preventDefault();                      //preventing auto refresh of the page
    //console.log("This function is working.");  //console.log to see if the function was running properly

    var search = document.getElementById('search').value; //storing the value of search
    document.getElementById('results').innerHTML = '';
    console.log(search);

    $.ajax({

        url: "https://www.googleapis.com/books/v1/volumes?q=" + search, //linking API + our search
        dataType: "json",

        success: function(data) {
            console.log(data)
            for (i=0;i<data.items.lenght;i++){
                results.innerHTML = "<h2>" + data.items[i].volumeInfo.title + "</h2>"
            }
        },

    type: "GET"

    })

}

从控制台，我可以看到数据以正确的方式收集到 API，但主要问题是我无法在页面本身上显示结果。也许这只是一个愚蠢的错误，但我正在努力寻找解决方案。

标签： javascripthtmlajax

解决方案

我认为您想要一个接一个地编写多个结果，但您会覆盖“结果”内容。一个修复可以是这样的：

success: function (data) {
  for (let i = 0; i < data.items.length; i++ ) {
    results.innerHTML += '<h2>'+ data.items[i].volumeInfo.title +'</h2>';
    // ^ defined      ^ see the plus sing in the declaration
  }
}

推荐阅读