如何使 HTML Button 在 Java 中执行操作？

Question

基本上我正在创建一个赞成/反对票系统，现在我在 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，请发表评论value 必须增加，并且在 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";

}

号码检查：

<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”是按钮的name属性，“save”和“cancel”是“value”属性:)希望对你有帮助

Answer 1

有一种最好的方法来解决这个问题。当您单击按钮触发一个事件并在该事件中增加或减少值时。在百里香叶中使用该值并将其传递给控制器​​。

Answer 2

您可以为此使用 jquery。首先在您的html页面中添加jquery库并在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 3

示例：

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

  });
});