HTML 按钮可以执行 POST 请求吗？答案

【问题标题】：Can a HTML button perform a POST request?HTML 按钮可以执行 POST 请求吗？
【发布时间】：2013-04-08 19:10:17
【问题描述】：

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

我正在考虑这样的事情：

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

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

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

更新

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

【问题讨论】：

我相信它不会将投票字符串发布到服务器。我现在试试
你需要js支持如jquery $.post
您需要使用提交按钮：<button type="submit">Send it</button> 您的代码的其余部分看起来不错（除了空格），操作字段包含所需服务器资源的 url，它获取数据进行进一步处理。
你真的需要花时间熟悉HTML Forms。
当然。我正在向您介绍一个很好的学习资源。

标签： javascript html post button submit

【解决方案1】：

你需要给按钮一个名字和一个值。

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

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

【讨论】：

可以在没有type="submit"的情况下使用此按钮（跨浏览器安全）吗？
@MohammedNoureldin — 是的。 submit 是<button> 上type 属性的默认值

【解决方案2】：

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

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

【讨论】：

【解决方案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}`);
  }
});

&lt;button id="post-btn"&gt;I'm a button&lt;/button&gt;

【讨论】：

获取失败？
如何在其中包含标题？只需在“等待”功能中添加“标题”部分？

【解决方案4】：

你可以：

或者，使用<input type="submit" ..>，而不是那个按钮。
或者，使用一点 javascript 来获取表单对象（使用名称或 id），并在其上调用 submit(..)。例如：form.submit()。将此代码附加到按钮单击事件。这将序列化表单参数并执行表单方法属性中指定的 GET 或 POST 请求。

【讨论】：

使用 ...将生成一个 GET 请求而不是 POST ...我已经测试过了
<form action = "" method "post"> <input type="Submit" name="upvote" value="Upvote"/> </form> 我的代码
@dorafmon — 除非表单首先在 URL http://127.0.0.1:8000/debate/00000001?upvote=Upvote 处呈现，否则您不应该得到该结果。
我先从debate/00000001开始，然后点击upvote按钮，然后我得到了结果url...
我真的怀疑您页面的其他部分正在修改方法属性。

【解决方案5】：

简单地做：

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

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

【讨论】：

这会发送一个带有空字符串 ("") 的 POST 变量 something 作为其内容。您可以在不设置 value 属性的情况下使用它来获取单击了哪个按钮，例如在 PHP 中，您将测试 if(isset($_POST["someting"]))。