JavaScript пост запрос как форма отправить

1531

Я пытаюсь направить браузер на другую страницу. Если бы я хотел запрос 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 не является ответом.

Джозеф Холстен
источник
1
Как уже упоминалось в другом потоке, существует плагин jquery ".redirect", который работает с методом POST или GET. Он создает форму со скрытыми входными данными и представляет ее для вас. Пример: $ .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
О. Г. Шон,

Ответы:

2145

Динамически создавать <input>s в форме и отправить его

/**
 * 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проверку, чтобы исправить любые непреднамеренные ошибки.

Ракеш Пай
источник
10
А как насчет массивов в параметрах данных? Jquery post () интерпретирует, например: «data: {array: [1, 2, 3]}» как? Array = 1 & array = 2 & array = 3. Вис код дает другой результат.
Скот
18
Предупреждение. Несмотря на множество отрицательных отзывов, это решение ограничено и не обрабатывает массивы или вложенные объекты внутри формы. В противном случае это отличный ответ.
Emragins
3
Удивительно, что это не поддерживается ни html, ни javascript, ни jquery. Вы должны написать это.
Евгений
14
@mricci Смысл этого фрагмента - перенаправить браузер на новый URL-адрес, указанный действием; если вы остаетесь на той же странице, вы можете просто использовать традиционный AJAX для размещения ваших данных. Поскольку браузер должен переходить на новую страницу, содержимое DOM текущей страницы не будет иметь значения
Кен Беллоуз
6
Пользователи Python, Django и, возможно, Flask увидят эту ошибку: «Запрещено (403). Ошибка проверки CSRF. Запрос отменен.», Если создается форма с нуля. В этом случае вы должны передать токен csrf следующим образом: post ('/ contact /', {name: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()});
Дэвидсон Лима
129

Это будет версия выбранного ответа с использованием 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
Исправлено: теперь добавление к document.body
Райан Делукки
7
Немного изменено это для поддержки массивов и объектов gist.github.com/hom3chuk/692bf12fe7dac2486212
НЛО
3
Если значение содержит символ XML dangeours, это не сработает в ASP.NET. EncodeUriComponent (value) не требуется. Затем UrlDecode также требуется на стороне сервера.
Стефан Штайгер
Если ваши потребности просты, то эта функция не нужна. Этого однострочника достаточно:$("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
Риного
71

Простая и быстрая реализация ответа @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 ...

Александр виктор
источник
6
Есть ли способ сделать это без загрузки веб-страницы в текущем окне / вкладке браузера?
pbreitenbach
54

Использование 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);
}
Джонни Бьюкенен
источник
6
Вам нужно удалить ребенка после подачи? В любом случае страница не уходит?
Нильс
2
Нет смысла удалять ребенка после отправки, кроме случаев, когда используется сеанс и эти данные сохраняются.
Милош
6
@CantucciHQ Страница может также остаться неизменной, даже если цель формы не установлена. Существует 204 No Content , например.
Евгений Рябцев
38

Ответ Ракеш Пая удивителен, но есть проблема, которая возникает у меня (в Safari ), когда я пытаюсь опубликовать форму с полем под названием submit. Например, 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!
Кендалл Хопкинс
источник
7
2018 и все же не лучший ответ?
iiirxs
30

Нет. У вас не может быть запроса на публикацию 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;
}

Лично я думаю, что формы должны быть адресованы по имени, но это сейчас не важно.

Габи де Вильде
источник
26

Если у вас установлен 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();
Глава
источник
25

это ответ Ракеша, но с поддержкой массивов (что довольно часто встречается в формах):

простой 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(); 
}
kritzikratzi
источник
3
PS Теперь мне нравится использовать эту функцию, но вместо отправки формы в конце я просто возвращаю ее вызывающей стороне. таким образом, я могу легко установить дополнительные атрибуты или делать другие вещи с ним при необходимости.
kritzikratzi
3
Большой! очень полезный. Небольшое изменение для людей, которые полагаются на PHP на стороне сервера этой формы, я изменил addField (ключ, params [ключ] [i]) на addField (ключ + '[]', params [ключ] [i]). Это делает $ _POST [ключ] доступным в виде массива.
Thava
2
@Thava, вы также можете установить name = "bla []" в поле ввода. В любом случае, есть другие языки, кроме php, которые не поддерживают синтаксис [], поэтому я оставляю это без изменений.
kritzikratzi
17

Одним из решений является создание формы и ее отправка. Одна реализация

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});
Джозеф Холстен
источник
16

Что ж, жаль, что я не прочитал все остальные посты, чтобы не терять время на создание этого из ответа Ракеш Пая. Вот рекурсивное решение, которое работает с массивами и объектами. Нет зависимости от 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();
};
emragins
источник
1
Похоже, что это не правильно кодирует вложенные объекты.
mpen
1
@mpen у тебя есть скрипка?
Emragins
1
Нет простите. Это было достаточно легко написать самому; не стоит времени на отладку.
mpen
12

Три варианта здесь.

  1. Стандартный ответ JavaScript: используйте фреймворк! Большинство фреймворков Ajax абстрагируют вас от простого способа сделать POST XMLHTTPRequest .

  2. Сделайте запрос XMLHTTPRequest самостоятельно, передавая сообщение в метод open вместо get. (Подробнее в разделе Использование метода POST в XMLHTTPRequest (Ajax) .)

  3. С помощью JavaScript динамически создайте форму, добавьте действие, добавьте свои данные и отправьте их.

Алан Сторм
источник
5
XMLHTTPRequest не обновляет окно. Вы пытаетесь сказать, что я должен закончить AJAX с document.write (http.responseText)?
Джозеф Холстен
11
Зачем добавлять 30k + в его проект, если он не делает ничего другого с фреймворком?
Дементик
12

Я бы пошел по маршруту 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");
Katy
источник
1
Uncaught ReferenceError: QueryString не определено.
Чейз Робертс
11

Самый простой способ - использовать Ajax Post Request:

$.ajax({
    type: "POST",
    url: 'http://www.myrestserver.com/api',
    data: data,
    success: success,
    dataType: dataType
    });

где:

  • данные - это объект
  • dataType - данные, ожидаемые сервером (xml, json, script, text, html)
  • url - это адрес вашего сервера RESt или любой функции на стороне сервера, которая принимает HTTP-POST.

Затем в обработчике успеха перенаправьте браузер с помощью что-то вроде window.location.

JLavoie
источник
5
Вы не упомянули, что предлагаемый вами подход основан на библиотеке JavaScript jQuery .
DavidRR
8
Вы также упустили суть вопроса - он хочет «направить браузер на другую страницу», а не делать запрос ajax.
черный
Вы можете дождаться ответа, а затем document.location = {url}; Единственное место, где я могу себе представить, это не сработает, если вы перенаправляете на загрузку файла.
Epirocks
11

Вот как я написал это, используя 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();
}
beauburrier
источник
1
Работал на меня. Спасибо. (Проверено в Chrome)
dannie.f
2
Я думаю, что проблема здесь может заключаться в том, что форма удаляется до возвращения представления. Я слышал, что в некоторых браузерах, если вы переместите или удалите форму до завершения отправки, обработчики не сработают. Вместо этого удалите форму из документа в обработчике.
Джефф DQ
Работает как шарм. Протестировано на Firefox + Chrome + IE11 - Большое спасибо за это!
Deunz
6

Библиотека 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();
};
Адам Несс
источник
1
Это решение является одним из немногих, которое не заменяет отображаемый в данный момент документ возвратом ответа сервера.
Dothebart
4

Это отлично работает в моем случае:

document.getElementById("form1").submit();

Вы можете использовать его в функции, как:

function formSubmit() {
     document.getElementById("frmUserList").submit();
} 

Используя это вы можете опубликовать все значения входов.

Чинтан Туммар
источник
3

Еще одно рекурсивное решение, поскольку некоторые из них, похоже, сломаны (я не проверял их все). Это зависит от 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();
}
mpen
источник
3

Мое решение будет кодировать глубоко вложенные объекты, в отличие от принятого в настоящее время решения @RakeshPai.

Он использует библиотеку 'qs' npm и функцию stringify для преобразования вложенных объектов в параметры.

Этот код хорошо работает с бэкэндом Rails, хотя вы должны иметь возможность изменить его для работы с любым бэкэндом, который вам нужен, изменив параметры, передаваемые для stringify. 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"]}]}
cmrichards
источник
2

FormObject является опцией. Но FormObject не поддерживается большинством браузеров.

lingceng
источник
1

Это как вариант Алана 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);
Роберт Ван Хуз
источник
1

Это основано на коде beauSD с использованием jQuery. Он улучшен, поэтому он работает рекурсивно на объектах.

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();
}
bobef
источник
1

Вы можете динамически добавить форму, используя DHTML, а затем отправить.

AnthonyWJones
источник
1

Вы можете использовать такую ​​библиотеку, как jQuery и ее метод $ .post .

Билл Тернер
источник
2
Обратите внимание, что $ .post является только AJAX.
Брайан Ларсен
1

Я использую java document.forms и зацикливаю его, чтобы получить все элементы в форме, а затем отправляю через 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>
drtechno
источник
1

Вы можете использовать триггерный метод jQuery для отправки формы, так же, как вы нажимаете кнопку, например,

$('form').trigger('submit')

он будет представлен в браузере.

Ханаан Этаи
источник
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();
}
rauprog
источник
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();
    }
nikksan
источник
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: код был взят из плагина перенаправления . Я просто упростил это для своих нужд.

вереск
источник
-1

Плагин jQuery для перенаправления с помощью POST или GET:

https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js

Чтобы проверить, включите вышеуказанный файл .js или скопируйте / вставьте класс в свой код, затем используйте код здесь, заменив «args» именами ваших переменных, а «values» значениями соответствующих переменных:

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
О.Г. Шон
источник
Это было также упомянуто здесь: stackoverflow.com/questions/8389646/…
О. Г. Шон
Это решение все еще работает для нас, если вы проголосовали против, оставьте комментарий, почему.
О. Г. Шон
-2

Вы можете сделать AJAX-вызов (вероятно, с использованием библиотеки, такой как Prototype.js или JQuery). AJAX может работать с опциями GET и POST.

Диодей - Джеймс Макфарлейн
источник
5
Использование XMLHttpRequest не приведет к переходу браузера на другую страницу.
Джонни Бьюкенен