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

вопрос создан в Tue, Aug 15, 2017 12:00 AM

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

    
1396
  1. Как уже упоминалось в другом потоке, существует плагин jquery ".redirect", который работает с методом POST или GET. Он создает форму со скрытыми входными данными и представляет ее для вас. Пример: $.redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/...
    2018-07-09 00: 16: 59Z
29 ответов                              29                         

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

    
2005
2019-05-03 20: 47: 35Z
  1. А как насчет массивов в параметрах данных? Например, JQuery post () интерпретирует, например: «data: {array: [1, 2, 3]}» как? Array = 1 &array = 2 &array = 3. Код Whis дает другой результат.
    2015-10-14 06: 36: 35Z
  2. Предупреждение. Несмотря на многочисленные отклонения, это решение ограничено и не обрабатывает массивы или вложенные объекты внутри формы. В противном случае это отличный ответ.
    2015-10-20 16: 41: 21Z
  3. @ mricci Цель этого фрагмента - перенаправить браузер на новый URL-адрес, указанный действием; если вы остаетесь на той же странице, вы можете просто использовать традиционный AJAX для размещения ваших данных. Поскольку браузер должен переходить на новую страницу, содержимое DOM текущей страницы не имеет значения
    2016-07-07 13: 07: 15Z
  4. Обратите внимание, что это, вероятно, устарело. Мы можем использовать FormData , чтобы достичь этого с помощью чистого JavaScript .
    2016-07-29 00: 00: 28Z
  5. @ stevemao Используя FormData, по-прежнему необходимо отправлять данные с использованием XMLHttpRequest, который, как указано в вышеприведенных комментариях, не может показать результат в окне браузера.
    2017-02-21 11: 53: 25Z

Это будет версия выбранного ответа с использованием 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();
}
    
119
2012-10-24 12: 26: 27Z
  1. Исправлено: теперь добавление в document.body
    2011-04-05 21: 01: 21Z
  2. Немного изменено это для поддержки массивов и объектов gist .github.com /hom3chuk /692bf12fe7dac2486212
    2015-09-28 22: 39: 29Z
  3. Если значение содержит символ x dangeours, это не сработает в ASP.NET. encodeUriComponent (value) не требуется. Затем UrlDecode также требуется на стороне сервера.
    2018-03-13 16: 26: 31Z

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

    
64
2012-03-10 17: 12: 33Z
  1. Есть ли способ сделать это без загрузки веб-страницы в текущем окне /вкладке браузера?
    2010-09-24 20: 37: 10Z
  2. да использовать атрибут target = '_ blank' в элементе формы
    2011-04-26 16: 03: 02Z

Использование функции createElement, представленной в этот ответ , который необходим из-за Сбой IE с атрибутом имени для элементов, созданных с помощью 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);
}
    
51
2017-05-23 10: 31: 38Z
  1. Вам нужно удалить ребенка после отправки? Разве страница не исчезла в любом случае?
    2012-05-31 22: 31: 44Z
  2. Нет смысла удалять дочерний объект после отправки, кроме случаев, когда используется сеанс и эти данные сохраняются.
    2012-07-20 07: 07: 53Z
  3. @ CantucciHQ Страница также может остаться неизменной, даже если цель формы не установлена. Например, существует 204 нет содержимого .
    2014-01-30 11: 41: 19Z

Ответ Ракеш Пая удивителен, но у меня возникает проблема (в 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!
    
37
2018-01-16 21: 54: 58Z
  1. 2018 и все еще не лучший ответ?
    2018-06-20 13: 35: 43Z

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

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

    
30
2019-03-07 17: 34: 29Z

Если у вас установлен 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();
    
24
2012-10-08 06: 09: 26Z

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

простой 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(); 
}
    
22
2012-03-22 01: 41: 05Z
  1. стр. Теперь мне нравится использовать эту функцию, но вместо отправки формы в конце я просто возвращаю ее вызывающей стороне. таким образом, я могу легко установить дополнительные атрибуты или делать другие вещи с ним при необходимости.
    2012-05-26 16: 09: 59Z
  2. Отлично! очень полезно. Небольшое изменение для людей, которые полагаются на PHP на стороне сервера этой формы, я изменил addField (ключ, params [ключ] [i]) на addField (ключ + '[]', params [ключ] [i]). Это делает $_POST [ключ] доступным в виде массива.
    2013-11-18 01: 07: 18Z
  3. @ Thava вы также можете установить name = "bla []" в поле ввода. В любом случае, есть другие языки, кроме php, которые не поддерживают синтаксис [], поэтому я оставляю это без изменений.
    2013-11-18 04: 20: 58Z

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

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});
    
15
2008-09-25 16: 05: 21Z
  1. для меня это даже работало без добавления формы в dom ..
    2016-03-10 20: 29: 50Z

Ну, если бы я прочитал все остальные посты, чтобы я не терял время на создание этого из ответа Ракеша Пая. Вот рекурсивное решение, которое работает с массивами и объектами. Нет зависимости от 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();
};
    
15
2015-10-20 11: 21: 24Z
  1. Похоже, это также не кодирует вложенные объекты должным образом.
    2016-05-11 18: 05: 54Z
  2. @ mpen У вас есть скрипка?
    2016-05-11 20: 47: 45Z
  3. Нет, извините. Это было достаточно легко написать самому; не стоит тратить время на отладку.
    2016-05-11 21: 21: 17Z

Здесь три варианта.

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

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

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

11
2012-03-10 17: 08: 32Z
  1. XMLHTTPRequest не обновляет окно. Вы пытаетесь сказать, что я должен закончить AJAX с document.write (http.responseText)?
    2008-09-25 16: 12: 49Z
  2. Почему нужно добавить 30k + к своему проекту, если он не делает ничего другого с фреймворком?
    2011-11-07 15: 26: 03Z

Я бы пошел по маршруту 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");
    
10
2014-08-21 09: 21: 43Z
  1. Uncaught ReferenceError: QueryString не определено.
    2015-05-12 03: 34: 47Z
  2. Исправление для источника Кэти: pastebin.com/Fi23YzVF
    2015-10-19 16: 02: 12Z

Вот как я это написал, используя 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();
}
    
10
2018-05-06 09: 01: 32Z
  1. Выглядит хорошо, но у меня не сработало.
    2010-11-01 15: 56: 32Z
  2. Работал для меня. Благодарю. (Протестировано в Chrome)
    2010-12-23 13: 43: 42Z
  3. Я думаю, что проблема здесь может заключаться в том, что форма удаляется до возвращения представления. Я слышал, что в некоторых браузерах, если вы переместите или удалите форму до завершения отправки, обработчики не сработают. Вместо этого удалите форму из документа в обработчике.
    2011-05-12 00: 18: 18Z
  4. Работает как шарм. Протестировано на Firefox + Chrome + IE11 - большое спасибо за это!
    2016-06-28 11: 41: 31Z

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

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

, где:

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

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

    
8
2014-06-19 18: 57: 24Z
  1. Вы не упомянули, что предлагаемый вами подход основан на библиотеке jQuery JavaScript.
    2013-12-15 01: 32: 15Z
  2. вы также упустили суть вопроса - он хочет «направить браузер на другую страницу», а не делать запрос ajax.
    2014-04-03 00: 21: 46Z
  3. Вы можете дождаться ответа и затем document.location = {url}; Единственное место, где я могу себе представить, это не сработает, если вы перенаправляете на загрузку файла.
    2017-03-21 10: 42: 46Z

Библиотека прототипа содержит объект 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();
};
    
5
2012-03-10 17: 10: 24Z
  1. Это одно из немногих решений, которое не заменяет отображаемый в данный момент документ возвратом ответа сервера.
    2015-12-30 16: 54: 54Z

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

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

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

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

С его помощью вы можете опубликовать все значения входов.

    
3
2018-05-06 09: 06: 51Z

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

    
2
2015-11-21 09: 07: 14Z

Еще одно рекурсивное решение, поскольку некоторые из них, похоже, сломаны (я не проверял их все). Это зависит от 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();
}
    
2
2016-05-11 21: 22: 51Z

Мое решение будет кодировать глубоко вложенные объекты, в отличие от принятого в настоящее время решения @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"]}]}
    
2
2018-08-31 22: 03: 28Z

Это похоже на вариант 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
2008-09-25 15: 40: 48Z

Это основано на коде 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();
}
    
1
2011-05-27 13: 19: 34Z

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

    
1
2012-03-10 17: 05: 18Z

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

1
2012-03-10 17: 05: 56Z
  1. Обратите внимание, что $.post предназначен только для AJAX.
    2012-03-27 12: 49: 27Z

Я использую 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>
    
1
2018-01-20 01: 41: 16Z

Метод, который я использую для автоматической публикации и перенаправления пользователя на другую страницу, заключается в том, чтобы просто написать скрытую форму и затем автоматически отправить ее. Будьте уверены, что скрытая форма не занимает абсолютно места на веб-странице. Код будет примерно таким:

    <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();
}
    
0
2017-09-25 08: 37: 10Z

Вот как я это делаю.

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();
    }
    
0
2018-03-06 23: 14: 25Z

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

https://github.com/mgalante/jquery .redirect /блоб /ведущий /jquery.redirect.js р>

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

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
    
0
2018-07-09 00: 22: 21Z
  1. Это также упоминалось здесь: stackoverflow.com/questions/8389646/…
    2018-07-09 00: 22: 51Z

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

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

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

    
0
2019-02-13 09: 13: 36Z

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

    
- 2
2008-09-25 15: 22: 14Z
  1. Использование XMLHttpRequest не приведет к переходу браузера на другую страницу.
    2008-09-25 15: 35: 19Z
источник размещен Вот