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

时间:2022-11-24 10:55:54

How to pass form data using POST method and JS submit() ?

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

I would like not to use AJAX.

我不想使用AJAX。

I can achieve that by using JS and GET method, but my goal now is to use JS (probably with submit() ) and POST method.

我可以通过使用JS和GET方法来实现这一点,但是我现在的目标是使用JS(可能是使用submit()和POST方法)。

Please give a simple working example.

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

Thank you!

谢谢你!

Edited: Sorry, I will be more specific. Here is a simple code I have:

编辑:不好意思,我再具体一点。这里有一个简单的代码:

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

When I insert "word" into the input field and press Search, the URL becomes "../index.php?query=word" and that means that form data is passed like GET method.

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

And my goal is to remove any form data from URL and pass it like with POST method.

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

Edited: ohh.. I just added method=post and no form data in the URL anymore :)

编辑:哦. .我只是添加了方法=post,在URL中没有表单数据:)

4 个解决方案

#1


8  

Just have a form and submit it.

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

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

EDIT: OP has clarified question

Specify a method attribute on your form.

在窗体上指定方法属性。

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

It will cause the form to be submitted as a POST.

它将导致表单作为一个帖子提交。

#2


3  

As mentioned already, you can use a form. I find it useful to have a function which creates a form on-the-fly and submits it - that way you don't need to clutter your markup with forms until they're needed by your JS.

如前所述,您可以使用表单。我发现,有一个动态创建表单并提交表单的函数非常有用——这样,在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();
};

Obviously that example JSON-serializes an object into a string and sets it on a single input, but you could adapt it to do whatever you need.

显然,这个示例json将对象序列化为字符串,并将其设置为单个输入,但您可以对其进行调整,以完成所需的工作。

EDIT: I'm not actually sure whether you even need to append to the DOM before submitting - can anyone clarify?

编辑:我不确定你是否需要在提交之前添加到DOM -有人能澄清吗?

#3


3  

Set the form's method attribute to POST:

将表单的方法属性设置为POST:

<form method="post">

And then submit the form via JavaScript using <formelement>.submit()

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

#4


0  

jQuery AJAX post is best way to do it. See below example code.

jQuery AJAX post是最好的方法。看到下面的示例代码。

e.preventDefault();

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

#1


8  

Just have a form and submit it.

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

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

EDIT: OP has clarified question

Specify a method attribute on your form.

在窗体上指定方法属性。

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

It will cause the form to be submitted as a POST.

它将导致表单作为一个帖子提交。

#2


3  

As mentioned already, you can use a form. I find it useful to have a function which creates a form on-the-fly and submits it - that way you don't need to clutter your markup with forms until they're needed by your JS.

如前所述,您可以使用表单。我发现,有一个动态创建表单并提交表单的函数非常有用——这样,在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();
};

Obviously that example JSON-serializes an object into a string and sets it on a single input, but you could adapt it to do whatever you need.

显然,这个示例json将对象序列化为字符串,并将其设置为单个输入,但您可以对其进行调整,以完成所需的工作。

EDIT: I'm not actually sure whether you even need to append to the DOM before submitting - can anyone clarify?

编辑:我不确定你是否需要在提交之前添加到DOM -有人能澄清吗?

#3


3  

Set the form's method attribute to POST:

将表单的方法属性设置为POST:

<form method="post">

And then submit the form via JavaScript using <formelement>.submit()

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

#4


0  

jQuery AJAX post is best way to do it. See below example code.

jQuery AJAX post是最好的方法。看到下面的示例代码。

e.preventDefault();

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