我正在尝试将浏览器指向另一个页面。如果我想要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不是答案。
当前回答
我使用document.forms并循环它以获取表单中的所有元素，然后通过XMLHttpRequest发送。这是我的javascript/ajax提交解决方案（以所有HTML为例）：
函数smc（）{var http=new XMLHttpRequest（）；var url=“yourphpfile.php”；var x=document.forms[0]；var xstr=“”；变量i；对于（i=0；i<x.length；i++）{如果（i==0）{xstr+=x.elements[i].name+“=”+x.elements[i].value；}其他{xstr+=“&”+x.elements[i].name+“=”+x.element[i].value；}}http.open（“POST”，url，true）；http.setRequestHeader（“内容类型”，“application/x-www-form-urlencoded”）；http.onreadystatechange=函数（）{如果（http.readyState==4&&http.status==200）{//在这里使用html输出响应执行任何操作}}http.send（xstr）；}<!DOCTYPE html><html><body><表单>名字：<input-type=“text”name=“fname”value=“Donald”><br>姓氏：<input-type=“text”name=“lname”value=“Duck”><br>地址1:<input-type=“text”name=“add”value=”123 Pond Dr“><br>城市：<input type=“text“name=”City“value=”Duckopolis“><br></form><button onclick=“smc（）”>提交</button></body></html>
其他回答
您可以使用类似jQuery的库及其$.post方法。
我使用document.forms并循环它以获取表单中的所有元素，然后通过XMLHttpRequest发送。这是我的javascript/ajax提交解决方案（以所有HTML为例）：
函数smc（）{var http=new XMLHttpRequest（）；var url=“yourphpfile.php”；var x=document.forms[0]；var xstr=“”；变量i；对于（i=0；i<x.length；i++）{如果（i==0）{xstr+=x.elements[i].name+“=”+x.elements[i].value；}其他{xstr+=“&”+x.elements[i].name+“=”+x.element[i].value；}}http.open（“POST”，url，true）；http.setRequestHeader（“内容类型”，“application/x-www-form-urlencoded”）；http.onreadystatechange=函数（）{如果（http.readyState==4&&http.status==200）{//在这里使用html输出响应执行任何操作}}http.send（xstr）；}<!DOCTYPE html><html><body><表单>名字：<input-type=“text”name=“fname”value=“Donald”><br>姓氏：<input-type=“text”name=“lname”value=“Duck”><br>地址1:<input-type=“text”name=“add”value=”123 Pond Dr“><br>城市：<input type=“text“name=”City“value=”Duckopolis“><br></form><button onclick=“smc（）”>提交</button></body></html>
上述解决方案中没有一个仅使用jQuery处理深度嵌套参数，这是我两美分的解决方案。
如果您正在使用jQuery，并且需要处理深层嵌套参数，可以使用下面的函数：
/**
* Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
* I just simplified it for my own taste.
*/
function postForm(parameters, url) {
// generally we post the form with a blank action attribute
if ('undefined' === typeof url) {
url = '';
}
//----------------------------------------
// SOME HELPER FUNCTIONS
//----------------------------------------
var getForm = function (url, values) {
values = removeNulls(values);
var form = $('<form>')
.attr("method", 'POST')
.attr("action", url);
iterateValues(values, [], form, null);
return form;
};
var removeNulls = function (values) {
var propNames = Object.getOwnPropertyNames(values);
for (var i = 0; i < propNames.length; i++) {
var propName = propNames[i];
if (values[propName] === null || values[propName] === undefined) {
delete values[propName];
} else if (typeof values[propName] === 'object') {
values[propName] = removeNulls(values[propName]);
} else if (values[propName].length < 1) {
delete values[propName];
}
}
return values;
};
var iterateValues = function (values, parent, form, isArray) {
var i, iterateParent = [];
Object.keys(values).forEach(function (i) {
if (typeof values[i] === "object") {
iterateParent = parent.slice();
iterateParent.push(i);
iterateValues(values[i], iterateParent, form, Array.isArray(values[i]));
} else {
form.append(getInput(i, values[i], parent, isArray));
}
});
};
var getInput = function (name, value, parent, array) {
var parentString;
if (parent.length > 0) {
parentString = parent[0];
var i;
for (i = 1; i < parent.length; i += 1) {
parentString += "[" + parent[i] + "]";
}
if (array) {
name = parentString + "[" + name + "]";
} else {
name = parentString + "[" + name + "]";
}
}
return $("<input>").attr("type", "hidden")
.attr("name", name)
.attr("value", value);
};
//----------------------------------------
// NOW THE SYNOPSIS
//----------------------------------------
var generatedForm = getForm(url, parameters);
$('body').append(generatedForm);
generatedForm.submit();
generatedForm.remove();
}
下面是一个如何使用它的示例。html代码：
<button id="testButton">Button</button>
<script>
$(document).ready(function () {
$("#testButton").click(function () {
postForm({
csrf_token: "abcd",
rows: [
{
user_id: 1,
permission_group_id: 1
},
{
user_id: 1,
permission_group_id: 2
}
],
object: {
apple: {
color: "red",
age: "23 days",
types: [
"golden",
"opal",
]
}
},
the_null: null, // this will be dropped, like non-checked checkboxes are dropped
});
});
});
</script>
如果您单击测试按钮，它将发布表单，您将在post中获得以下值：
array(3) {
["csrf_token"] => string(4) "abcd"
["rows"] => array(2) {
[0] => array(2) {
["user_id"] => string(1) "1"
["permission_group_id"] => string(1) "1"
}
[1] => array(2) {
["user_id"] => string(1) "1"
["permission_group_id"] => string(1) "2"
}
}
["object"] => array(1) {
["apple"] => array(3) {
["color"] => string(3) "red"
["age"] => string(7) "23 days"
["types"] => array(2) {
[0] => string(6) "golden"
[1] => string(4) "opal"
}
}
}
}
注意：如果要将表单发布到当前页面以外的其他url，可以将该url指定为postForm函数的第二个参数。
例如（重复使用您的示例）：
postForm({'q':'a'}, 'http://example.com/');
希望这有帮助。
注2：代码取自重定向插件。我基本上只是简化了它满足我的需求。
使用此答案中提供的createElement函数，这是必要的，因为IE在使用document.createElement正常创建的元素上使用name属性时会中断：
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);
}
这是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();
}
