html按钮可以执行POST请求吗？

Question

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

我在考虑这样的事情:

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

字符串"Upvote"将作为POST请求中的名称发送.

我知道这不起作用,我知道有一些方法可以使用AJAX(javascript),但我对这个领域还很新.我只是想知道这是否可能.

更新

有人建议使用<input>标签,我用它.问题是它生成一个GET而不是一个POST.

Answer 1

您需要为按钮指定名称和值.

没有名称就无法提交控件,而按钮元素的内容是标签,而不是值.

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

Answer 2

这可以使用"提交"类型的输入元素来完成.这将显示为用户的按钮,单击按钮将发送表单.

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

Answer 3

您可以在JS的帮助下完成此操作。在下面的示例中，使用fetch方法在单击按钮时提交了POST请求：

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>

Answer 4

只需执行以下操作：

<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>

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