Как исправить функцию поиска Javascript в приложении Spring Boot - PullRequest
0 голосов
/ 04 апреля 2019

Это мой первый пост, поэтому извиняюсь, если это не сделано должным образом.

В настоящее время я работаю над функцией поиска Javascript в моем приложении Spring Boot и не могу понять, почему оно не дает результатов поиска.

Я обыскал сети, чтобы найти что-то, что могло бы помочь, но не нашел ничего полезного.

Я пытался смотреть на контроллер, а также на Javascript, но я все еще довольно нов, поэтому я не могу понять, в чем проблема.

Зависимости Gradle:

dependencies {
        compile('org.springframework.boot:spring-boot-starter-data-jpa')
        compile('org.springframework.boot:spring-boot-starter-thymeleaf')
        compile('org.springframework.boot:spring-boot-starter-web')
        runtime('org.springframework.boot:spring-boot-devtools')
        runtime('com.h2database:h2')
        testCompile('org.springframework.boot:spring-boot-starter-test')
    }

Контроллер

    @RequestMapping(path = "/searchBy/{barcode}", method = GET)
    public String searchAllByBarcode(@PathVariable String barcode, Model model) {
        model.addAttribute("foundItems", itemRepo.findAllByBarcode(barcode));
        return "find";
    }

Javascript:

searchItems
document.addEventListener("DOMContentLoaded", function() {
    const addItemButton = document.querySelector('#findItems');
    addItemButton.addEventListener('click',searchItems)
});

function searchItems(){
    const barcode = document.querySelector('#info_input').value
    const xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr);
                console.log(barcode);
            }
        }

    xhr.open('GET', '/searchBy/'+ barcode, true)
    xhr.send()
}

HTML:

<body>
    <div class="container">

        <header class="header">
            <img class="main__logo" src="../images/wolf.png" />
            <div class="title">
                <h3>Search an Item!</h3>
            </div>
        </header>

        <div class="delete__item__list">
            <div>
                <form method="GET">
                    <label id="search_by" for="input">
                        <select>
                            <option value="0">Search Item By:</option>
                            <option value="1">Barcode:</option>
                            <option value="2">Quantity:</option>
                            <option value="3">Expiration Date:</option>
                            <option value="4">Name:</option>
                            <option value="5">Unit:</option>
                            <option value="6">Location:</option>
                            <option value="7">Description:</option>
                            <option value="8">Mercedes</option>
                        </select>
                    </label>
                    <input type="text" name="input" maxlength="200" id="info_input" autofocus="true" required="true" />
                    <input type="submit" id="findItems" name="myButton" value="Search" />
                </form>
            </div>

            <div class="item-list" th:each="item: ${foundItems}">
                <div th:id="'item-'+ ${item.id}">
                    <a th:href="@{'/item/'+${item.id}}" th:text="${'Barcode: ' + item.Barcode + ' Quantity: ' + item.Quantity + ' Expiration Date: ' + item.ExpirationDate + ' Name: ' + item.Name + ' Unit: ' + item.Unit + ' Location: ' + item.Location + ' Price: ' + item.Price + ' Description: ' + item.Description}"></a>
                    <button type="submit" class="deleteItem" th:attr="data-id=${item.id}" for="id" name="id">Remove</button>
                </div>
            </div>
        </div>

        <nav class="nav__bar">
            <a href="add">
                <button class="add_item_button">Add</button>
            </a>
            <a href="delete">
                <button class="delete_button">Delete</button>
            </a>
            <a href="/">
                <button class="home_button">Home</button>
            </a>
        </nav>

        <footer class="footer">
        </footer>
    </div>

</body>

<script src="/js/search.js"></script>

Это должно быть извлечение данных из базы данных и отображение предмета инвентаря, но вместо этого он не показывает результатов. Я не уверен, что это Javascrpt, controller, html или все вышеперечисленное.

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

Заранее спасибо за помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...