Это мой первый пост, поэтому извиняюсь, если это не сделано должным образом.
В настоящее время я работаю над функцией поиска 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 или все вышеперечисленное.
Пожалуйста, дайте мне знать, если что-нибудь еще нужно, и я буду рад предоставить.
Заранее спасибо за помощь.