如何使用<a href="...">标签提交POST表单？

Question

我如何只使用<a href="...">标签提交一个POST表单到showMessage.jsp页面？

<form action="showMessage.jsp" method="post">
    <a href="showMessage.jsp"><%=n%></a>
    <input type="hidden" name="mess" value=<%=n%>/>
</form>

- hozaifa

---

可能是在JSP上使用链接提交表单的重复问题。 - BalusC

Answer 1

如果您使用按钮，就不需要 JavaScript：

<form action="your_url" method="post">
    <button type="submit" name="your_name" value="your_value" class="btn-link">Go</button>
</form>

你可以通过样式使按钮看起来像链接，例如：

.btn-link {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #0000EE;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
}

- rybo111

---

因为您的“方法”没有使用a标签。 - Winfield Trail

好的，但你仍然选择回答了一个不同于所问的问题。而鉴于可擦除墨水实际上是一种在工业规模下生产的可行产品... - Winfield Trail

就我个人而言，我同情你的回答，并且在我需要维护的 Web 应用程序中，我更愿意看到这样的回答。我只是解释了下降票 - 顺便说一句，这不是我留下的。 ;) - Winfield Trail

Bootstrap 中的 class="btn btn-link" 表示创建一个链接样式的按钮。 - Coffee inTime

完美地满足了我的需求！ - Ryan Harris

Answer 2

你需要使用JavaScript来完成这个任务。

<form id="form1" action="showMessage.jsp" method="post">
    <a href="javascript:;" onclick="document.getElementById('form1').submit();"><%=n%></a>
    <input type="hidden" name="mess" value=<%=n%>/>
</form>

- naveed

Answer 3

你需要在你的 form 对象上使用 Javascript 的 submit 函数。可以查看其他函数。

<form action="showMessage.jsp" method="post">
    <a href="javascript:;" onclick="parentNode.submit();"><%=n%></a>
    <input type="hidden" name="mess" value=<%=n%>/>
</form>

- user898741

---

表单元素不一定始终是锚点标签的父节点。 - naveed

Answer 4

如果你使用MVC来完成它 - 你需要做类似这样的事情。

 <form action="/ControllerName/ActionName" method="post">
        <a href="javascript:;" onclick="parentNode.submit();"><%=n%></a>
        <input type="hidden" name="mess" value=<%=n%>/>
    </form>

我刚刚浏览了这里的一些示例，没有看到MVC示例，所以决定发表这篇文章。

然后，在您的控制器操作中，我只需要在顶部放置<HTTPPost>。 我认为，如果您没有<HTTPGET>，它仍然可以工作，但明确地放置它会感觉更安全一些。

- Alexey Shevelyov

Answer 5

似乎没有办法欺骗<a href= ..成为POST方法。但是，如果您可以访问页面的CSS，则可以使用表单来替代它。不幸的是，仅在CSS中将按钮样式化为锚标记的明显方法不跨浏览器兼容，因为不同的浏览器对<button value= ...的处理方式不同。

Incorrect:

<form action='actbusy.php' method='post'>
  <button type='submit' name='parameter' value='One'>Two</button>
</form>

上面的例子在FireFox中将显示“Two”并传递“parameter:One”，而在IE8中将显示“One”并传递“parameter:One”。

解决方法是使用隐藏的输入字段来传递数据，按钮仅用于提交。

<form action='actbusy.php' method='post'>
   <input class=hidden name='parameter' value='blaah'>
   <button type='submit' name='delete' value='Delete'>Delete</button>
</form>

请注意，该方法具有副作用，除了“parameter:blaah”之外，它还会在POST中提供“delete:Delete”作为多余参数。

您希望将按钮的值属性和按钮标签保持相同（在此情况下为“Delete”），因为（如上所述）某些浏览器将显示一个按钮标签，而其他浏览器则显示另一个。

- Laid

---

你确定IE8会这样做吗？我刚在IE7中尝试了<button value="Bad">Good</button>，它显示为“Good”。 - rybo111

Answer 6

我使用 jQuery 脚本为我的可 POST 链接创建“阴影”表单。

我不会写成 <a href="/some/action?foo=bar">，而是写成 <a data-post="/some/action" data-var-foo="bar" href="#do_action_foo_bar">。脚本会生成一个隐藏的表单和隐藏的输入框，并在链接被点击时提交表单。

$("a[data-post]")
    .each(function() {
        let href = $(this).data("post"); if (!href) return;
        let $form = $("<form></form>").attr({ method:"POST",action:href }).css("display","none")
        let data = $(this).data()
        for (let dat in data) {
            if (dat.startsWith("postVar")) {
                let varname = dat.substring(7).toLowerCase()  // postVarId -> id
                let varval = data[dat]
                $form.append($("<input/>").attr({ type:"hidden",name:varname,value:varval }))
            }
        }
        $("body").append($form)
        $(this).data("postform",$form)
    })
    .click(function(ev) {
        ev.preventDefault()
        if ($(this).data("postform")) $(this).data("postform").submit(); else console.error("No .postform set in <a data-post>")
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-post="/some/action" data-var-foo="bar" href="#do_action_foo_bar">click me</a>

- Sinus the Tentacular

Answer 7

如果您正在使用express/node.js，一个很好的覆盖http函数的方法是使用npm包method-override。 Method-override example。

- Inarus Lynx