Реализация функциональности панели поиска с помощью AJAX и HTTP-запросов - JavaScript - PullRequest
Новая
       19

Реализация функциональности панели поиска с помощью AJAX и HTTP-запросов - JavaScript

0 голосов
/ 31 декабря 2018

Я пытаюсь создать функцию поиска, которая находит данные в зависимости от введенного запроса (поэтому типичная строка поиска в моем 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>

Пожалуйста, сообщите мне, если вам нужна дополнительная информация.

ОБНОВЛЕНИЕ: Переиздано для, надеюсь, менее запутанного названия.

1 Ответ

0 голосов
/ 01 января 2019

Я предполагаю, что ваш поиск работает, используя term в качестве переменной GET (т. Е. Поиск выглядит так: http://127.0.0.1:3000/books?term=godfather) 

const books_url = "http://127.0.0.1:3000/books";
document.getElementById('searchBtn').addEventListener('click', bookSearch, false);

function bookSearch() {
    var search = document.getElementById('searchBar').value;
    document.getElementById('booksFound').innerHTML = "";
    console.log('Looking for ' + search);
    console.log('Search button works');
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () { // this is what happens when an answer is returned 
        if(xhttp.readyState === 4 && xhttp.status === 200) { // a valid answer
           document.getElementById("divShowBooks").innerHTML = xhttp.responseText;
         }
    };
    xhttp.open("GET", books_url, true);
    xhttp.send("term=" + search ); // sending the term variable to the search page
}

, вам следует ознакомиться с этими основными принципамиили это будет сбивать с толку:

GET параметры

AJAX

надеюсь, что это вас туда доставит - удачи ис новым годом!

...