时间戳

首页 > 解决方案 > 如何为同一个 HTML 文件中的两个按钮创建两个单独的 POST 方法？

html - 如何为同一个 HTML 文件中的两个按钮创建两个单独的 POST 方法？

问题描述

所以我试图将两个按钮放在同一个 html 文件中，每个按钮指向不同的位置，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>`
</head>
<body>
<div>Impossible! Let me try again!</div>
<form method="post">
    <input type="submit" value="Try again!">
    <input type="submit" value="No, you failed!">
</form>
</body>
</html>

应该在我的控制器中处理这种情况的方法如下所示：

@RequestMapping(value = "/no", method = RequestMethod.POST)
    public String triedAgain(Model model) {
        int generatedAgain = numberService.random();
        model.addAttribute("generatedAgain", generatedAgain);
        return "tryagain";
    }

如果“再试一次！” 选中后，应出现以下 html 文件：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="header">
    <div th:text="'The number you thought about is: ' + ${generatedAgain} + '. This time for sure!'"/>
</div>
<form method="post">
    <div class="overall">Did I get it right?</div>
    <div class="button">
        <a class="menu-button" href="/yes">Yes!</a>
        <a class="menu-button" href="/no">No!</a>
    </div>
</form>
</body>
</html>

但是，很明显，我的控制器的方法适用于两个按钮。“不，你失败了！” 一个应该指向不同的地方，这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>You cheated :-(</div>

<a href="/home">Let me try again!</a>

</body>
</html>

那么如何告诉控制器中的方法它应该应用到两个可用按钮中的哪一个，以及不应该应用到哪一个呢？

我也尝试切换到这种按钮......：

<a class="menu-button" href="/failed">No, you failed!</a>

...因为它指定了一个“href”，但是如果我用它来将用户引导到另一个 html...应该在那里生成一个简单的 int 的方法是吐出一个“null”。

我有点迷路了，请帮忙。

标签： htmlpostbuttonmethods

解决方案

添加 2 个输入字段 type=button; 为每个分配“id”并使用操作“onclick”。

<form method="post">
<input id="btn1Submit" type="button" value="Try again!">
<input id="btn2Submit" type="button" value="No, you failed!">
</form>


<script src="/path/to/jquery.js"></script>
<script>
$(document).ready(function() {
$("#btn1Submit").click(function(){
    alert("button1");
});
$("#btn2Submit").click(function(){
    alert("button2");
});
});
</script>

推荐阅读