.innerHTML(使用Ajax)未在网页中显示结果

时间:2019-07-19 14:09:55

标签: javascript html 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,但是主要问题是我无法设法在页面本身上显示结果。 也许这只是一个愚蠢的错误,但我正在努力寻找解决方案。

2 个答案:

答案 0 :(得分:0)

您没有检索DOM元素results和分配innerHTML

$.ajax({
    url: "https://www.googleapis.com/books/v1/volumes?q=" + search, //linking API + our search
    dataType: "json",
    success: function(data) {
        console.log(data)
        // ADD THIS LINE
        var results = document.getElementById('results');
        for (i=0;i<data.items.length;i++){ // YOU HAD A TYPO HERE WITH `length`
            // YOU WANT TO CONCATENATE CONTENT OTHERWISE YOU'LL REPLACE IT EACH TIME
            results.innerHTML += "<h2>" + data.items[i].volumeInfo.title + "</h2>"
        }
    },
    type: "GET"
})

绝对建议尽可能以最少的数量更新DOM,因此最好创建并分配一个变量,然后一次分配results.innerHTML。但这应该可以帮助您入门。

答案 1 :(得分:0)

我认为您想要一个接一个地写多个结果,但是您覆盖了“结果”内容。一种解决方法是:

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