Question

我正在尝试创建一个搜索功能，该功能根据输入的查询来查找数据（因此是HTML中的典型搜索栏）。我需要它来搜索我存储在数据库中的书籍的标题，可以在GET请求位置中进行访问。到目前为止，我已经管理了从数据库中获取数组的代码，但是我正在尝试按标题搜索。

var xhttp = new XMLHttpRequest();

const books_url = "http://127.0.0.1:3000/books" 

xhttp.open("GET", books_url, true);
xhttp.addEventListener('load', function() {

    function bookSearch() {
        var search = document.getElementById('searchBar').value
        document.getElementById('booksFound').innerHTML = ""
        console.log('Looking for ' + search)
        console.log('Search button works')
    }

    document.getElementById('searchBtn').addEventListener('click', bookSearch, false)
    document.getElementById("divShowBooks").innerHTML = this.responseText;
    console.log(xhttp);
    console.log(this.response);
});
xhttp.send();

这是我的 HTML 代码，我在其中使用搜索栏并尝试显示它。

<section class="bookSearchBar">
    <h4>Search Books</h4>
    <form method="GET" id="searchBooks" class="form-inline md-form form-sm active-pink-2 mt-2">
        <input id="searchBar" class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search by Title" aria-label="Search">
        <button id="searchBtn" type="button">Submit</button>
        <i class="fas fa-search" aria-hidden="true"></i>
    </form> 
    <div id="booksFound"></div>
</section>

如果您需要更多信息，请通知我。

更新：重新发布，希望标题不那么混乱。

Answer 1

我将假设您使用Button作为term变量来进行搜索（即搜索看起来像这样：GET）

http://127.0.0.1:3000/books?term=godfather

您应该阅读这些基本原理，否则会造成混淆：

GET parameters

AJAX

希望这能帮助您-祝您新年快乐！

使用AJAX和HTTP请求实现搜索栏功能-JavaScript

1 个答案: