Can a HTML button perform a POST request?

我需要一个提交类型按钮来发送 POST 请求。

我在想这样的事情:

<form action = "" method = "post">
<button>Upvote</button>
<form>

其中字符串“ UpVote”将作为名称在 POST 请求中发送。

我知道这不起作用，我也知道有很多方法可以使用 AJAX (javascript) ，但是我对这个领域还是比较陌生的。我只是想知道这是否可行。

更新

有人建议使用 <input>标签，我试了试。问题是它生成的是 GET 而不是 POST。

341070 次浏览
小开
最佳答案

这可以通过类型为“提交”的输入元素来完成。这将作为一个按钮出现在用户面前，单击该按钮将发送表单。

<form action="" method="post">
<input type="submit" name="upvote" value="Upvote" />
</form>
小开

你可以:

  • 或者，使用 <input type="submit" ..>，而不是那个按钮。
  • 或者，使用一些 javascript，获取表单对象(使用名称或 id) ，并对其调用 submit(..)。例句: form.submit()。将此代码附加到按钮单击事件。这将序列化表单参数并执行表单的 method 属性中指定的 GET 或 POST 请求。
小开

您需要给按钮一个名称和一个值。

没有名称就不能提交控件，按钮元素的内容是标签，而不是值。

<form action="" method="post">
<button name="foo" value="upvote">Upvote</button>
</form>
小开

你可以在 JS 的帮助下做到这一点。 在下面的例子中，一个 POST 请求正在通过按钮点击提交，使用的是 get 方法:

const button = document.getElementById('post-btn');


button.addEventListener('click', async _ => {
try {
const response = await fetch('yourUrl', {
method: 'post',
body: {
// Your body
}
});
console.log('Completed!', response);
} catch(err) {
console.error(`Error: ${err}`);
}
});
<button id="post-btn">I'm a button</button>

小开

简单来说:

<form action="" method="post" id="myForm">
<button type="submit" class="btn btn-sm btn-info" name="something"><i class="fa fa-check"></i>Submit</button>
</form>

或者，如果出于审美原因，希望按钮位于窗体之外，请执行以下操作:

<button type="submit" form="myForm" class="btn btn-sm btn-info" name="something"><i class="fa fa-check"></i>Submit</button>

当我的表单太长时，我通常会使用这个选项，我希望在页面的开头和结尾都有一个提交按钮。


提交答案