我正在尝试将浏览器定向到其他页面。如果我想要一个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'});
什么是最好的跨浏览器实现？
修改
对不起，我不清楚。我需要一个改变浏览器位置的解决方案，就像提交表单一样。如果XMLHttpRequest可以实现这一点，那就不明显了。这不应该是异步的，也不应该使用XML，所以Ajax不是答案。
答案 0 :(得分：1997)
<input>并提交/**
* sends a request to the specified url from a form. this will change the window location.
* @param {string} path the path to send the post request to
* @param {object} params the paramiters to add to the url
* @param {string} [method=post] the method to use on the form
*/
function post(path, params, method='post') {
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
const form = document.createElement('form');
form.method = method;
form.action = path;
for (const key in params) {
if (params.hasOwnProperty(key)) {
const hiddenField = document.createElement('input');
hiddenField.type = 'hidden';
hiddenField.name = key;
hiddenField.value = params[key];
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
示例：
post('/contact/', {name: 'Johnny Bravo'});
编辑：由于这已经引起了如此多的关注，我猜测人们将会复制粘贴这么多。所以我添加了hasOwnProperty检查以修复任何无意的错误。
答案 1 :(得分：118)
这将是使用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();
}
答案 2 :(得分：64)
@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();
答案 3 :(得分：51)
使用this answer中提供的createElement功能，IE's brokenness with the name attribute通常使用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);
}
答案 4 :(得分：37)
Rakesh Pai's answer令人惊讶，但当我尝试发布一个名为submit的字段的表单时，我遇到了一个问题（在Safari中）。例如，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!
答案 5 :(得分：28)
没有。您不能像表单提交那样拥有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;
}
我个人认为表格应该通过名字来解决，但现在这并不重要。
答案 6 :(得分：24)
如果安装了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();
答案 7 :(得分：22)
这是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();
}
答案 8 :(得分：15)
嗯，希望我已经阅读了所有其他帖子，所以我没有浪费时间从Rakesh Pai的回答中创造这个。这是一个适用于数组和对象的递归解决方案。不依赖于jQuery。
添加了一个段来处理整个表单应该像数组一样提交的情况。 （即，项目列表周围没有包装器对象）
/**
* Posts javascript data to a url using form.submit().
* Note: Handles json and arrays.
* @param {string} path - url where the data should be sent.
* @param {string} data - data as javascript object (JSON).
* @param {object} options -- optional attributes
* {
* {string} method: get/post/put/etc,
* {string} arrayName: name to post arraylike data. Only necessary when root data object is an array.
* }
* @example postToUrl('/UpdateUser', {Order {Id: 1, FirstName: 'Sally'}});
*/
function postToUrl(path, data, options) {
if (options === undefined) {
options = {};
}
var method = options.method || "post"; // Set method to post by default if not specified.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
function constructElements(item, parentString) {
for (var key in item) {
if (item.hasOwnProperty(key) && item[key] != null) {
if (Object.prototype.toString.call(item[key]) === '[object Array]') {
for (var i = 0; i < item[key].length; i++) {
constructElements(item[key][i], parentString + key + "[" + i + "].");
}
} else if (Object.prototype.toString.call(item[key]) === '[object Object]') {
constructElements(item[key], parentString + key + ".");
} else {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", parentString + key);
hiddenField.setAttribute("value", item[key]);
form.appendChild(hiddenField);
}
}
}
}
//if the parent 'data' object is an array we need to treat it a little differently
if (Object.prototype.toString.call(data) === '[object Array]') {
if (options.arrayName === undefined) console.warn("Posting array-type to url will doubtfully work without an arrayName defined in options.");
//loop through each array item at the parent level
for (var i = 0; i < data.length; i++) {
constructElements(data[i], (options.arrayName || "") + "[" + i + "].");
}
} else {
//otherwise treat it normally
constructElements(data, "");
}
document.body.appendChild(form);
form.submit();
};
答案 9 :(得分：15)
一种解决方案是生成表单并提交。一个实现是
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();
}
所以我可以用简单的
实现一个URL缩短书签javascript:post_to_url('http://is.gd/create.php', {'URL': location.href});
答案 10 :(得分：11)
这里有三个选择。
标准JavaScript答案：使用框架！大多数Ajax框架都会让您轻松地进行XMLHTTPRequest POST。
自己制作XMLHTTPRequest请求，将post传递给open方法而不是get。 （ Using POST method in XMLHTTPRequest (Ajax) 中的详细信息。）
通过JavaScript，动态创建表单，添加操作，添加输入并提交输入。
答案 11 :(得分：10)
我会像其他人建议的那样沿着Ajax路线前进：
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open("POST", "YourPageHere.asp", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
self.xmlHttpReq.setRequestHeader("Content-length", QueryString.length);
self.xmlHttpReq.send("?YourQueryString=Value");
答案 12 :(得分：10)
以下是我使用jQuery编写的方法。在Firefox和Internet Explorer中测试。
function postToUrl(url, params, newWindow) {
var form = $('<form>');
form.attr('action', url);
form.attr('method', 'POST');
if(newWindow){ form.attr('target', '_blank');
}
var addParam = function(paramName, paramValue) {
var input = $('<input type="hidden">');
input.attr({ 'id': paramName,
'name': paramName,
'value': paramValue });
form.append(input);
};
// Params is an Array.
if(params instanceof Array){
for(var i=0; i<params.length; i++) {
addParam(i, params[i]);
}
}
// Params is an Associative array or Object.
if(params instanceof Object) {
for(var key in params){
addParam(key, params[key]);
}
}
// Submit the form, then remove it from the page
form.appendTo(document.body);
form.submit();
form.remove();
}
答案 13 :(得分：8)
最简单的方法是使用Ajax Post Request：
$.ajax({
type: "POST",
url: 'http://www.myrestserver.com/api',
data: data,
success: success,
dataType: dataType
});
其中：
然后在成功处理程序中使用window.location等重定向浏览器。
答案 14 :(得分：5)
Prototype库包含一个Hashtable对象，带有“.toQueryString（）”方法，允许您轻松地将JavaScript对象/结构转换为查询字符串样式字符串。由于帖子要求请求的“主体”是查询字符串格式的字符串，这允许您的Ajax请求作为帖子正常工作。以下是使用Prototype的示例：
$req = new Ajax.Request("http://foo.com/bar.php",{
method: 'post',
parameters: $H({
name: 'Diodeus',
question: 'JavaScript posts a request like a form request',
...
}).toQueryString();
};
答案 15 :(得分：3)
这完全适用于我的情况：
document.getElementById("form1").submit();
您可以在以下功能中使用它：
function formSubmit() {
document.getElementById("frmUserList").submit();
}
使用此功能，您可以发布所有输入值。
答案 16 :(得分：2)
与@RakeshPai当前接受的解决方案不同，我的解决方案将对深层嵌套的对象进行编码。
它使用'qs'npm库及其stringify函数将嵌套对象转换为参数。
尽管您应该能够通过修改传递给stringify的选项来修改它以使其与所需的任何后端一起使用，但是此代码与Rails后端很好地兼容。 Rails要求将arrayFormat设置为“括号”。
import qs from "qs"
function normalPost(url, params) {
var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", url);
const keyValues = qs
.stringify(params, { arrayFormat: "brackets", encode: false })
.split("&")
.map(field => field.split("="));
keyValues.forEach(field => {
var key = field[0];
var value = field[1];
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", value);
form.appendChild(hiddenField);
});
document.body.appendChild(form);
form.submit();
}
示例：
normalPost("/people/new", {
people: [
{
name: "Chris",
address: "My address",
dogs: ["Jordan", "Elephant Man", "Chicken Face"],
information: { age: 10, height: "3 meters" }
},
{
name: "Andrew",
address: "Underworld",
dogs: ["Doug", "Elf", "Orange"]
},
{
name: "Julian",
address: "In a hole",
dogs: ["Please", "Help"]
}
]
});
产生以下Rails参数：
{"authenticity_token"=>"...",
"people"=>
[{"name"=>"Chris", "address"=>"My address", "dogs"=>["Jordan", "Elephant Man", "Chicken Face"], "information"=>{"age"=>"10", "height"=>"3 meters"}},
{"name"=>"Andrew", "address"=>"Underworld", "dogs"=>["Doug", "Elf", "Orange"]},
{"name"=>"Julian", "address"=>"In a hole", "dogs"=>["Please", "Help"]}]}
答案 17 :(得分：2)
FormObject是一个选项。但是现在大多数浏览器都不支持FormObject。
答案 18 :(得分：2)
又一个递归解决方案，因为其他一些似乎被打破了（我没有测试所有这些）。这个取决于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();
}
答案 19 :(得分：1)
这是基于使用jQuery的beauSD代码。它得到了改进，因此它可以在对象上递归工作。
function post(url, params, urlEncoded, newWindow) {
var form = $('<form />').hide();
form.attr('action', url)
.attr('method', 'POST')
.attr('enctype', urlEncoded ? 'application/x-www-form-urlencoded' : 'multipart/form-data');
if(newWindow) form.attr('target', '_blank');
function addParam(name, value, parent) {
var fullname = (parent.length > 0 ? (parent + '[' + name + ']') : name);
if(value instanceof Object) {
for(var i in value) {
addParam(i, value[i], fullname);
}
}
else $('<input type="hidden" />').attr({name: fullname, value: value}).appendTo(form);
};
addParam('', params, '');
$('body').append(form);
form.submit();
}
答案 20 :(得分：1)
这就像Alan的选项2（上图）。如何实例化httpobj作为一个练习。
httpobj.open("POST", url, true);
httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange=handler;
httpobj.send(post);
答案 21 :(得分：1)
你可以使用像jQuery这样的库及其$.post method。
答案 22 :(得分：1)
您可以使用DHTML动态添加表单，然后提交。
答案 23 :(得分：1)
我使用document.forms java并将其循环以获取表单中的所有元素，然后通过xhttp发送。所以这是我的javascript / ajax提交解决方案（以所有html为例）：
<!DOCTYPE html>
<html>
<body>
<form>
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
Addr1: <input type="text" name="add" value="123 Pond Dr"><br>
City: <input type="text" name="city" value="Duckopolis"><br>
</form>
<button onclick="smc()">Submit</button>
<script>
function smc() {
var http = new XMLHttpRequest();
var url = "yourphpfile.php";
var x = document.forms[0];
var xstr = "";
var ta ="";
var tb ="";
var i;
for (i = 0; i < x.length; i++) {
if (i==0){ta = x.elements[i].name+"="+ x.elements[i].value;}else{
tb = tb+"&"+ x.elements[i].name +"=" + x.elements[i].value;
} }
xstr = ta+tb;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
// do whatever you want to with the html output response here
}
}
http.send(xstr);
}
</script>
</body>
</html>
答案 24 :(得分：0)
以上解决方案均未使用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：代码取自redirect plugin。我基本上只是简化了它 满足我的需求。
答案 25 :(得分：0)
您可以使用jQuery触发方法来提交表单，就像按下按钮一样
$('form').trigger('submit')
它将在浏览器中提交。
答案 26 :(得分：0)
尝试
function post_to_url(url, obj) {
let id=`form_${+new Date()}`;
document.body.innerHTML+=`
<form id="${id}" action="${url}" method="POST">
${Object.keys(obj).map(k=>`
<input type="hidden" name="${k}" value="${obj[k]}">
`)}
</form>`
this[id].submit();
}
// TEST - in second param object can have more keys
function jump() { post_to_url('https://example.com/', {'q':'a'}); }Open chrome>networks and push button:
<button onclick="jump()">Send POST</button>
答案 27 :(得分：0)
用于通过POST或GET重定向的jQuery插件：
https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
要进行测试，请包含上述.js文件或将类复制/粘贴到您的代码中，然后在此处使用代码，将“ args”替换为变量名，将“ values”替换为相应变量的值：< / p>
$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
答案 28 :(得分：0)
我是这样做的。
function redirectWithPost(url, data){
var form = document.createElement('form');
form.method = 'POST';
form.action = url;
for(var key in data){
var input = document.createElement('input');
input.name = key;
input.value = data[key];
input.type = 'hidden';
form.appendChild(input)
}
document.body.appendChild(form);
form.submit();
}
答案 29 :(得分：0)
我用来自动发布和引导用户到另一个页面的方法是只写一个隐藏的表单，然后自动提交它。请放心，隐藏的表单在网页上绝对没有空间。代码将是这样的：
<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();
}
答案 30 :(得分：-2)
您可以进行AJAX调用（可能使用诸如使用Prototype.js或JQuery之类的库）。 AJAX可以处理GET和POST选项。