我正在尝试将浏览器指向另一个页面。如果我想要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不是答案。
当前回答
在表单中动态创建＜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 parameters 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 verbose 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检查，以修复任何意外的错误。
其他回答
您可以使用类似jQuery的库及其$.post方法。
@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。。。
接受的答案将像提交本地表单一样重新加载页面。此修改版本将通过XHR提交：
function post(path, params) {
const form = document.createElement('form');
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);
}
}
var button = form.ownerDocument.createElement('input');
button.type = 'submit';
form.appendChild(button);
form.onsubmit = async function (e) {
console.log('hi');
e.preventDefault();
const form = e.currentTarget;
try {
const formData = new FormData(form);
const response = await fetch(path, {
method: 'POST',
body: formData,
});
console.log(response);
} catch (error) {
console.error(error);
}
};
document.body.appendChild(form);
button.click();
}
我用来发布和引导用户自动到另一个页面的方法是只写一个隐藏表单，然后自动提交。请确保隐藏表单在网页上绝对不会占用空间。代码应该是这样的：
<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();
}
一种解决方案是生成表单并提交
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});
