I want to make my little project and build a Library app with API on Java and UI with ThymeLeaf and JQuery. Here is my controller
@GetMapping(value = "/books-genre")
public List<BookDto> findBooksByGenre(@RequestParam(name = "genre2") String genre) {
System.err.println(genre);
List<Book> books = BookService.findBooksByGenre(genre);
return bookDtoConverter.booksToDto(books);
}
Here is my UI in AJAx.
<script>
function findBooksByGenre () {
var x = document.getElementById("genre").value;
console.log(x);
var param = $.param(genre, x);
var param2 = {
genre : x
};
$.getJSON('/books-genre/' + $('#genre2').val()).done(function (books2) {
alert(books2.length);
books2.forEach(function (book2) {
coment = book2.comments.length;
cond = coment != 0 ? coment : 'no comments';
$('tbody').append(`
<tr>
<td>${book2.id}</td>
<td>${book2.name}</td>
<td>${book2.author.name}</td>
<td>${book2.genre.name}</td>
<td> ${cond}
<a href="comments/?bookId=${book2.id}">view</a>
</td>
</tr>
`)
});
})
};
</script>
<div class="a">
<h2>Options</h2>
<form action="">
<label for="genre">Choose by genre: </label>
<input type="text" id="genre"/>
<input type="submit" onclick="findBooksByGenre()" value="Submit"><br><br>
</form>
</div>
I want to make a table with these books. But every my call do nothing! As if getJSON does not see my query params at all! I try another functions too, for example just get(/books-genre, {genre2 : drama}).done()......
nothing change. Please Help me say me what I do wrong… Because another controller without query params works well