Я пытаюсь направить браузер на другую страницу. Если бы я хотел получить 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'});
Какая лучшая кроссбраузерная реализация?
Edit
Прошу прощения, что не совсем ясно выразился. Мне нужно решение, которое меняет местоположение браузера, так же как и отправка формы. Если это возможно с помощью XMLHttpRequest, то это не очевидно. И это не должно быть асинхронным или использовать XML, так что Ajax - не выход.
``Яш /**
функция пост(путь, параметры, способ='пост') {
// Остальной части этот код предполагает, что вы не используете библиотеку. // Оно может быть менее многословным, если вы используете один. константная форма = документ.метод createElement('форма'); форма.метод = способ; форма.действие = путь;
для (ключевые const в параметры) { если (параметры.метод hasOwnProperty(ключ)) { hiddenField константный = документ.метод createElement('вход'); hiddenField.тип = 'скрытые'; hiddenField.имя = ключ; hiddenField.значение = параметры[ключ];
форма.метода appendChild(hiddenField); } }
документ.тела.метода appendChild(форма); форма.отправить(); }
``
Пример:
Яш пост('/контакт/', {имя: 'Джонни Браво'});
Редактировать: после этого получил много голосов так много, я'м думаю, что люди будут копировать-вставить это много. Поэтому я добавил метод hasOwnProperty
проверить исправить любые случайные ошибки.
Это будет вариант выбранного ответа, используя библиотеку 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();
}
Простой быстрый-и-грязный осуществлении @Аарон ответил:
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-фреймворк, например, прототип или с jQuery...
С помощью метода createElementфункции, представленной в [этот ответ][1], которая необходима из-за [т. е.'ы разбитость с атрибутом name][2] на элементы, созданные, как правило с документом.метод 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);
}
Ракеш Пай'ы ответ Удивительно, но есть проблема, которая возникает для меня (в сафари), Когда я пытаюсь отправить форму, в поле "отправить". Например, post_to_url("в http://google.com/",{ представить: на "Отправить" и } );
. Я слегка пропатчил функции прогуляться по этой переменной места столкновения.
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!
Нет. Вы можете'т запрос на 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;
}
Лично я считаю, что формы должны быть обращались по имени, но это не важно сейчас.
Если у вас есть [прототип][установлен 1], можно подтянуть код для создания и отправки скрытых такой форме:
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();
это ответ на Ракеша, но с поддержкой массивов (которая довольно часто встречается в формах):
простой 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();
}
о, и здесь's в версии 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();
}
Одно из решений-создать форму и отправить ее. Одна реализация
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});
Ну, Жаль, что я прочитал все другие посты так что я не'т терять времени на создание этого Ракеш Пай'ы ответ. Здесь'ы рекурсивное решение, которое работает с массивами и объектами. Не зависимость от jQuery.
Добавлено сегмент для обработки случаев, когда вся форма должна быть представлена как массив. (т. е. где там's нет объект-обертка вокруг списка товаров)
/**
* 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();
};
Вот как я написал это с помощью jQuery. Проверено в Firefox и Internet&ампер;усилитель; nbsp;Обозреватель.
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();
}
Я'd не идти по пути "Аякса", другие предлагали что-то вроде:
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");
Три варианта здесь.
Стандартный JavaScript ответ: использовать фреймворк! Большинство платформ AJAX будет реферировать вам простой способ сделать запрос пост.
Сделать запрос запрос на себя, передав пост в открытый способ, а не вам. (Более подробная информация в используя метод POST в запрос XMLHttpRequest (Аякс).)
Через JavaScript, динамически создать форму, добавить действие, добавить свои входы, и представить, что.
Самый простой способ сделать это с помощью запроса POST на AJAX:
$.ajax({
type: "POST",
url: 'http://www.myrestserver.com/api',
data: data,
success: success,
dataType: dataType
});
где:
Затем в обработчике успехом перенаправить браузер с чем-то вроде окна.расположение.
В прототип библиотека включает в себя объект хеш-таблице, с помощью ".toQueryString()" и метод, который позволяет легко превратить в объект JavaScript/структуру в запрос-строка строка стиль. Поскольку должность требует в "тело" из запроса Запрос-строку, отформатированную строку, это позволяет ваш AJAX-запрос, чтобы работать должным образом, как пост. Здесь'ы пример использования прототипа:
$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();
};
Это прекрасно работает в моем случае:
document.getElementById("form1").submit();
Вы можете использовать его в функции, как:
function formSubmit() {
document.getElementById("frmUserList").submit();
}
С помощью этого вы можете оставить все значения входов.
Мое решение будет кодировать глубоко вложенные объекты, в отличие от принятых в настоящее время решение по @RakeshPai.
Он использует 'СМО' НПМ библиотеки и ее преобразовать в строки функции для преобразования вложенных объектов в параметры.
Этот код хорошо работает с рельсов админцентр, хотя вы должны быть в состоянии изменить его для работы с любой серверной необходимо, изменив параметры, которые передаются преобразовать в строки. Рельсы требует, чтобы 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"]
}
]
});
Производит эти параметры рельсов:
{"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"]}]}
Еще один рекурсивные решение, так как некоторые другие, кажется, быть нарушена (я не'т проверить их все). Это зависит от лодашь 3.х и ЕС6 (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();
}
Вы можете динамически добавить форму с помощью DHTML, а затем отправить ее.