JavaScript发布请求，例如表单提交
我正在尝试将浏览器定向到其他页面。如果我想要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并不是答案。
第258篇《JavaScript发布请求，例如表单提交》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
我使用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>
您可以使用jQuery之类的库及其$ .post方法。
您可以使用DHTML动态添加表单，然后提交。
在我的情况下，这非常有效：
document.getElementById("form1").submit();
您可以在类似的函数中使用它：
function formSubmit() {
document.getElementById("frmUserList").submit();
}
使用此功能，您可以发布所有输入值。
我的解决方案将对深度嵌套的对象进行编码，这与@RakeshPai当前接受的解决方案不同。
它使用“ qs” npm库及其stringify函数将嵌套对象转换为参数。
尽管您应该能够通过修改传递给stringify的选项来修改它以使其与所需的任何后端一起工作，但是该代码与Rails后端可以很好地协同工作。Rails要求将arrayFormat设置为“ brackets”。
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"]}]}
FormObject是一个选项。但是，大多数浏览器现在不支持FormObject。
这里有三个选择。
标准JavaScript答案：使用框架！大多数Ajax框架都会使您抽象出进行XMLHTTPRequest POST 的简便方法。
自己发出XMLHTTPRequest请求，将post传递到open方法而不是get中。（有关更多信息，请参见在XMLHTTPRequest（Ajax）中使用POST方法。）
通过JavaScript，动态创建表单，添加操作，添加输入并提交。
这是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();
}
使用此答案中createElement提供的功能，由于IE的损坏（通常使用以下方法创建的元素上具有name属性），这是必需的：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);
}
相似问题
问题类别
您可以进行AJAX调用（可能使用诸如Prototype.js或JQuery之类的库）。AJAX可以处理GET和POST选项。