我正在尝试将浏览器指向另一个页面。如果我想要GET请求，我可以说
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提交表单。
但实际上，我希望JavaScript代码能够让我说
post_to_url('http://example.com/', {'q':'a'});
最好的跨浏览器实现是什么？
我需要一个改变浏览器位置的解决方案，就像提交表单一样。这不应该是异步的，也不应该使用XML，因此Ajax不是答案。
当前回答
这是rakesh的答案，但支持数组（这在形式上很常见）：
纯javascript：
function post_to_url(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);
var addField = function( key, value ){
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", value );
form.appendChild(hiddenField);
};
for(var key in params) {
if(params.hasOwnProperty(key)) {
if( params[key] instanceof Array ){
for(var i = 0; i < params[key].length; i++){
addField( key, params[key][i] )
}
}
else{
addField( key, params[key] );
}
}
}
document.body.appendChild(form);
form.submit();
}
哦，这里是jquery版本：（代码略有不同，但归结起来是相同的）
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default, if not specified.
var form = $(document.createElement( "form" ))
.attr( {"method": method, "action": path} );
$.each( params, function(key,value){
$.each( value instanceof Array? value : [value], function(i,val){
$(document.createElement("input"))
.attr({ "type": "hidden", "name": key, "value": val })
.appendTo( form );
});
} );
form.appendTo( document.body ).submit();
}
其他回答
这里有三个选项。
标准JavaScript回答：使用框架！大多数Ajax框架都会抽象出一种简单的XMLHTTPRequest POST方法。自己生成XMLHTTPRequest请求，将post传递到open方法而不是get。（有关在XMLHTTPRequest（Ajax）中使用POST方法的更多信息。）通过JavaScript，动态创建表单，添加动作，添加输入，然后提交。
不可以。您不能像提交表单一样提交JavaScript发布请求。
您可以拥有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;
}
就我个人而言，我认为表格应该用名字来称呼，但现在这并不重要。
还有另一个递归解决方案，因为其他一些似乎已被破坏（我没有测试所有这些）。这取决于lodash 3.x和ES6（不需要jQuery）：
function createHiddenInput(name, value) {
let input = document.createElement('input');
input.setAttribute('type','hidden');
input.setAttribute('name',name);
input.setAttribute('value',value);
return input;
}
function appendInput(form, name, value) {
if(_.isArray(value)) {
_.each(value, (v,i) => {
appendInput(form, `${name}[${i}]`, v);
});
} else if(_.isObject(value)) {
_.forOwn(value, (v,p) => {
appendInput(form, `${name}[${p}]`, v);
});
} else {
form.appendChild(createHiddenInput(name, value));
}
}
function postToUrl(url, data) {
let form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', url);
_.forOwn(data, (value, name) => {
appendInput(form, name, value);
});
form.submit();
}
我用来发布和引导用户自动到另一个页面的方法是只写一个隐藏表单，然后自动提交。请确保隐藏表单在网页上绝对不会占用空间。代码应该是这样的：
<form name="form1" method="post" action="somepage.php">
<input name="fielda" type="text" id="fielda" type="hidden">
<textarea name="fieldb" id="fieldb" cols="" rows="" style="display:none"></textarea>
</form>
document.getElementById('fielda').value="some text for field a";
document.getElementById('fieldb').innerHTML="some text for multiline fieldb";
form1.submit();
自动提交申请
自动提交的应用程序会将用户自动放入另一页的表单值引导回该页。此类应用程序如下所示：
fieldapost=<?php echo $_post['fielda'];>
if (fieldapost !="") {
document.write("<form name='form1' method='post' action='previouspage.php'>
<input name='fielda' type='text' id='fielda' type='hidden'>
</form>");
document.getElementById('fielda').value=fieldapost;
form1.submit();
}
您可以进行AJAX调用（可能使用Prototype.js或JQuery等库）。AJAX可以处理GET和POST选项。
