102

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

我正在考虑这样的事情：

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

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

我知道这不起作用，而且我知道有一些方法可以使用 AJAX(javascript)，但我对这个领域还很陌生。我只是想知道这是否可能。

更新

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

4

5 回答 5

79

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

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

<form action="" method="post">
    <button name="foo" value="upvote">Upvote</button>
</form>
于 2013-04-16T11:56:12.837 回答
67

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

<form action="" method="post">
    <input type="submit" name="upvote" value="Upvote" />
</form>
于 2013-04-16T11:43:02.820 回答
15

你可以在 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>

于 2019-01-07T12:16:48.483 回答
4

你可以：

  • 或者，使用<input type="submit" ..>, 而不是那个按钮。
  • 或者，使用一些 javascript 来获取表单对象（使用名称或 id），然后调用submit(..)它。例如：form.submit()。将此代码附加到按钮单击事件。这将序列化表单参数并执行表单方法属性中指定的 GET 或 POST 请求。
于 2013-04-16T11:43:49.840 回答
3

只需这样做：

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

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

于 2021-08-26T09:58:50.267 回答