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

这可以使用“submit”类型的input元素来完成。这将显示为用户的按钮，单击按钮将发送表单。

<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

你可以：

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

Answer 5

<form class="form-signin" action="URL_OF_REST" method="POST">
    <h2 class="form-signin-heading">Simple Form</h2>
    <input class="form-control" name="Enter your Name" required type="text" placeholder="Email address" />
    <input class="form-control" name="password" required="" type="password" placeholder="Password" />
    <label class="checkbox"></label>
    <br />
    <button class="btn btn-lg btn-primary btn-block" type="submit">Reset</button> 
    <button class="btn btn-lg btn-primary btn-block" type="submit">Launch</button>
</form>

您可以使用文本框和提交按钮查看此示例代码。
希望这可以帮助您更好地了解POST在HTML中的工作方式。

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

5 个答案: