javascript - javaScript像表单提交的post请求

  显示原文与译文双语对照的内容

我正试图将浏览器定向到其他页面。 如果我想要一个获取请求,我可以说


document.location.href = 'http://example.com/?q=a';

但是,我试图访问的资源不会正确响应,除非我使用POST请求。 如果没有动态生成,我可能会使用 HTML


<form action="http://example.com/" method="POST">
 <input type="hidden" name="q" value="a">
</form>

然后我将从DOM提交表单。

但我真的希望能够让我说出


post_to_url('http://example.com/', {'q':'a'});

最好的跨浏览器 实现是什么?

编辑

很抱歉我没有明确。 我需要一个改变浏览器位置的解决方案,就像提交表单一样。 如果使用 XMLHttpRequest,这是不明显的。 这也不应该是异步的,也不能使用 XML,所以Ajax不是答案。

时间:


function post(path, params, method) {
 method = method ||"post";//Set method to post by default if not specified.

//The rest of this code assumes you are not using a library.
//It can be made less wordy if you use one.
 var form = document.createElement("form");
 form.setAttribute("method", method);
 form.setAttribute("action", path);

 for(var key in params) {
 if(params.hasOwnProperty(key)) {
 var hiddenField = document.createElement("input");
 hiddenField.setAttribute("type","hidden");
 hiddenField.setAttribute("name", key);
 hiddenField.setAttribute("value", params[key]);

 form.appendChild(hiddenField);
 }
 }

 document.body.appendChild(form);
 form.submit();
}

例如:


post('/contact/', {name: 'Johnny Bravo'});

编辑:因为这已经upvoted,我猜人们将copy-pasting这个很多。 所以我添加了 hasOwnProperty 检查来修正任何疏忽的Bug 。

这将是使用 jQuery的选定答案的版本。


//Post to the provided URL with the specified parameters.
function post(path, parameters) {
 var form = $('<form></form>');

 form.attr("method","post");
 form.attr("action", path);

 $.each(parameters, function(key, value) {
 var field = $('<input></input>');

 field.attr("type","hidden");
 field.attr("name", key);
 field.attr("value", value);

 form.append(field);
 });

//The form needs to be a part of the document in
//order for us to be able to submit it.
 $(document.body).append(form);
 form.submit();
}

使用 createElement 函数中提供这回答,这是必要的因为 brokenness创建的元素的名称属性 IE document.createElement 通常:


function postToURL(url, values) {
 values = values || {};

 var form = createElement("form", {action: url,
 method:"POST",
 style:"display: none"});
 for (var property in values) {
 if (values.hasOwnProperty(property)) {
 var value = values[property];
 if (value instanceof Array) {
 for (var i = 0, l = value.length; i <l; i++) {
 form.appendChild(createElement("input", {type:"hidden",
 name: property,
 value: value[i]}));
 }
 }
 else {
 form.appendChild(createElement("input", {type:"hidden",
 name: property,
 value: value}));
 }
 }
 }
 document.body.appendChild(form);
 form.submit();
 document.body.removeChild(form);
}

一个简单的quick-and-dirty实现的@Aaron 答案:


document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>';
document.getElementById("dynForm").submit();

当然,你应该使用一个JavaScript框架,比如 Prototype 或者 jQuery 。

Rakesh回答pai是惊人的,但有一个问题发生的对我来说( 在 Safari编辑器中) 当你试图发布一个叫做 submit 表单的字段。 比如, post_to_url("http://google.com/",{ submit:"submit" } ); 我已经将函数稍微修补过,以绕过这个变量空间碰撞。


 function post_to_url(path, params, method) {
 method = method ||"post";

 var form = document.createElement("form");

//Move the submit function to another variable
//so that it doesn't get overwritten.
 form._submit_function_ = form.submit;

 form.setAttribute("method", method);
 form.setAttribute("action", path);

 for(var key in params) {
 var hiddenField = document.createElement("input");
 hiddenField.setAttribute("type","hidden");
 hiddenField.setAttribute("name", key);
 hiddenField.setAttribute("value", params[key]);

 form.appendChild(hiddenField);
 }

 document.body.appendChild(form);
 form._submit_function_();//Call the renamed function.
 }
 post_to_url("http://google.com/", { submit:"submit" } );//Works!

如果你安装了 Prototype,你可以加强代码来生成和提交隐藏的表单,如下所示:


 var form = new Element('form',
 {method: 'post', action: 'http://example.com/'});
 form.insert(new Element('input',
 {name: 'q', value: 'a', type: 'hidden'}));
 $(document.body).insert(form);
 form.submit();

一个解决方案是生成表单并提交它。 一个实现是


function post_to_url(url, params) {
 var form = document.createElement('form');
 form.action = url;
 form.method = 'POST';

 for (var i in params) {
 if (params.hasOwnProperty(i)) {
 var input = document.createElement('input');
 input.type = 'hidden';
 input.name = i;
 input.value = params[i];
 form.appendChild(input);
 }
 }

 form.submit();
}

这样我就可以用一个简单


javascript:post_to_url('http://is.gd/create.php', {'URL': location.href});

这里有三个选项。

  1. 标准的JavaScript回答:使用框架 ! 大多数Ajax框架都将你抽象为一个简单的方法来创建 XMLHTTPRequest

  2. 让XMLHTTPRequest请求自己,将post传递到开放方法而不是获取。 ( 在 ( Ajax ) 中使用POST方法的的更多信息)

  3. 通过 JavaScript,动态创建一个表单,添加一个动作,添加你的输入,并提交。

,答案是。。

不,你不能让 javascript post请求像表单提交。

你可以在html中找到一个表单,然后用javascript提交。 ( 在这里页面上多次解释)

你可以自己创建 html,不需要javascript来编写 html 。 如果人们建议这样做。


<form id="ninja" action="http://example.com/" method="POST">
 <input id="donaldduck" type="hidden" name="q" value="a">
</form>

你的函数将按照你想要的方式配置表单。


function postToURL(a,b,c){
 document.getElementById("ninja").action = a;
 document.getElementById("donaldduck").name = b;
 document.getElementById("donaldduck").value = c;
 document.getElementById("ninja").submit();
}

然后,使用它。


postToURL("http://example.com/","q","a");

但我只是忽略了函数,只是做了。


 document.getElementById('donaldduck').value ="a";
 document.getElementById("ninja").submit();

最后,风格决定在ccs文件中。


.ninja{ 
 display:none;
}

我个人认为表单应该用名字来称呼,但现在并不重要。

...