如何使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，Create 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>

固定

将按钮类型更改为“提交”，然后在控制器中：

@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”是“ value”属性:)希望对您有所帮助

Answer 1

使用以下内容并在您的代码中实现

$(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);
    });

  });
});

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。 首先在您的html页面中添加jquery库，并在script标记内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

解决此问题的最佳方法是：单击按钮触发一个事件，然后在该事件上增加或减少值。在百里香叶中使用该值并将其传递给控制器​​。