如何使用 POST 方法和 JS submit() 传递表单数据？答案

【问题标题】：How to pass form data using POST method and JS submit()?如何使用 POST 方法和 JS submit() 传递表单数据？
【发布时间】：2011-12-16 16:06:53
【问题描述】：

如何使用 POST 方法和 JS submit() 传递表单数据？

我不想使用 AJAX。

我可以通过使用 JS 和 GET 方法来实现，但我现在的目标是使用 JS（可能使用 submit() ）和 POST 方法。

请给出一个简单的工作示例。

谢谢！

编辑：对不起，我会更具体。这是我的一个简单代码：

<form name=\"myform\" action=\"\">
  Search: <input type='text' name='query' />
  <a href=\"javascript: submitform()\">Search</a>
</form>

 <script type=\"text/javascript\">
 function submitform() {   document.myform.submit(); }
 </script>

当我在输入字段中插入“word”并按 Search 时，URL 变为“../index.php?query=word”，这意味着表单数据像 GET 方法一样传递。

我的目标是从 URL 中删除任何表单数据并像使用 POST 方法一样传递它。

已编辑：哦.. 我刚刚添加了 method=post 并且不再在 URL 中添加表单数据 :)

【问题讨论】：

能否请您向我们展示您当前的 HTML/JS ......不太确定为什么这被标记为 PHP ？

标签： javascript html

【解决方案1】：

只要有一个表格并提交它。

form = document.forms[0] //assuming only form.
form.submit();

编辑：OP 已澄清问题

在您的表单上指定 method 属性。

<form name="myform" action="" method="POST">

这将导致表单作为 POST 提交。

【讨论】：

【解决方案2】：

如前所述，您可以使用表单。我发现拥有一个动态创建表单并提交它的函数很有用 - 这样你就不需要在你的 JS 需要它们之前将你的标记与表单混为一谈。

function PostObjectToUri(uri, obj) {
    "use strict";

    var json, form, input;

    json = JSON.stringify(obj);

    form = document.createElement("form");
    form.method = "post";
    form.action = uri;
    input = document.createElement("input");
    input.setAttribute("name", "json");
    input.setAttribute("value", json);
    form.appendChild(input);
    document.body.appendChild(form);
    form.submit();
};

显然，该示例 JSON 将对象序列化为字符串并将其设置在单个输入上，但您可以对其进行调整以执行您需要的任何操作。

编辑：我实际上不确定您是否需要在提交之前附加到 DOM - 谁能澄清一下？

【讨论】：

【解决方案3】：

将表单的method 属性设置为POST：

<form method="post">

然后使用<formelement>.submit()通过JavaScript提交表单

【讨论】：

类似document.getElementById('theForm').submit()

【解决方案4】：

jQuery AJAX post 是最好的方法。请参阅下面的示例代码。

e.preventDefault();

$.ajax({
   type: 'post',
   url: 'data.php',
   data: $('form').serialize(),
   success: function(response) {
      $('#DisplayDiv').html(response);
   }
});

【讨论】：