Как заставить HTML Button выполнять действие в Java?

Question

В основном я создаю систему upvote / downvote, теперь я создал две кнопки в HTML:

<button type="button" name="upvote"></button>
<br>
<input type="number" th:value = "${commentValue}" disabled>
<br>
<button type="button" name="downvote"></button>

Первая кнопка с атрибутом имени - "upvote" и вторая с "downvote", сейчасЯ хочу поймать нажатие на кнопку и изменить commentValue соответственно, Если пользователь нажимает upvote, значение комментария должно быть положительным, а при downvote оно должно уменьшаться

Я нашел некоторыеразделы, в которых говорится о реализации ActionListener, создании объектов JButton и т. д., но нет ли более простого способа?

Это мой код прямо сейчас, кнопки ничего не делают.:

Контроллер:

private int numberValue = 0;

@GetMapping("/check")
public String nuberCheck(Model model){

    model.addAttribute("commentValue", numberValue);

    return "numberCheck";
}

@PostMapping("/check")
public String upvote(Model model, @RequestParam String action){
    if (action == "upvote"){
        numberValue++;
        model.addAttribute("commentValue", numberValue);
    }else if (action == "downvote"){
        numberValue --;
        model.addAttribute("commentValue", numberValue);
    }
    return "numberCheck";

}

numberCheck:

<form action="#" th:action="@{/check}" method="post">
    <button type="button" name="action" th:value="upvote" th:text = "upvote"></button>
    <br>
    <input type="number" th:value = "${commentValue}" disabled>
    <br>
    <button type="button" name="action" th:value = "dowvnote" th:text = "dowvnote"></button>
</form>

FIXED

Измените типы кнопок на «submit», а затем в контроллере:

@PostMapping("/check")
public String check(Model model,@RequestParam String action) {

    System.out.println(action);

    if (action.equals("upvote")) {
        numberValue++;
        model.addAttribute("numberValue", numberValue);
    }

    if (action.equals("dowvnote")) {
        numberValue--;
        model.addAttribute("numberValue", numberValue);
    }
    return "numberCheck";
}

@RequestParam String action «action» - это атрибут имени кнопки, а «save» и «cancel» - «значение»атрибуты :) надеюсь, это поможет

Answer 1

Есть один лучший способ решить эту проблему. Когда вы нажимаете кнопку, запускаете одно событие, и при этом событии увеличиваете или уменьшаете значение., Используйте это значение в тимьяновом листе и передавайте его контроллеру.

Answer 2

Образец:

HTML:

<form action="#" data-th-action="@{/action}" data-th-object="${model}" method="post">
    <button type="submit" name="upvote"></button>
    <button type="submit" name="downvote"></button>
</form>

Java:

@RequestMapping(value="/action", method=RequestMethod.POST)
public ModelAndView onClickAction() {}

Answer 3

Вы можете использовать jquery для этого.сначала добавьте библиотеку jquery на html-страницу и напишите функцию, как показано ниже, внутри тега script

function upVote(){
var counter= $('.comment').val();
counter++;
 $('.coment').val(counter);

}
function downVote(){
var counter= $('.comment').val();
counter--;
 $('.coment').val(counter);

}

<button type="submit"  name="upvote" th:onclick="'upVote();'"></button>
<br>
<input type="number" class="comment"th:value = "${commentValue}" disabled>
<br>
<button type="submit" name="downvote" th:onclick="'upVote();'"></button>

Answer 4

Используйте следующее и внедрите в свой код

$(document).ready(function(){
$("#up").click(function(){
    var up = $.post("/upvote", {changeBy: 1}, function(dataBack){

        $("#upvote").text(dataBack);
    });

});
$("#down").click(function(){
    var down = $.post("/downvote", {changeBy: 1},
    function(dataBack){
        $("#downvote").text(dataBack);
    });

  });
});