Question

如何使用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和没有表单数据：）

Answer 1

只需拥有一份表格并提交即可。

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

编辑：OP已澄清问题

在表单上指定method属性。

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

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

Answer 2

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

<form method="post">

然后使用<formelement>.submit()

通过JavaScript提交表单

Answer 3

如前所述，您可以使用表单。我觉得有一个函数可以动态创建一个表单并提交它 - 这样你就不需要用表单来混淆你的标记，直到你的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 - 有人可以澄清吗？

Answer 4

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

e.preventDefault();

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

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

4 个答案:

编辑：OP已澄清问题