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

Я пытаюсь направить браузер на другую страницу. Если бы я хотел запрос GET, я мог бы сказать

document.location.href = 'http://example.com/q=a';

Но ресурс, к которому я пытаюсь получить доступ, не будет отвечать должным образом, если я не использую запрос POST. Если бы это не было сгенерировано динамически, я мог бы использовать HTML

 

Тогда я бы просто отправил форму из DOM.

Но на самом деле я хотел бы код JavaScript, который позволяет мне сказать

post_to_url('http://example.com/', {'q':'a'});

Какая лучшая кросс-браузерная реализация?

Редактировать

Извините, мне было непонятно. Мне нужно решение, которое меняет местоположение браузера, так же, как отправка формы. Если это возможно с XMLHttpRequest , это не очевидно. И это не должно быть ни асинхронным, ни использовать XML, поэтому Ajax не является ответом.

вопрос задан 25.09.2008
Joseph Holsten
8720 репутация

28 ответов


  • 1876 рейтинг
     /**
     * 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) {
        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);
    
        for(var key in params) {
            if(params.hasOwnProperty(key)) {
                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();
    }
    

    Пример:

    post('/contact/', {name: 'Johnny Bravo'});
    

    РЕДАКТИРОВАТЬ : Так как за это проголосовало так много, я предполагаю, что люди будут копировать это много. Поэтому я добавил проверку hasOwnProperty, чтобы исправить любые непреднамеренные ошибки.

    ответ дан Rakesh Pai, с репутацией 20616, 25.09.2008
  • 110 рейтинг

    Это будет версия выбранного ответа с использованием jQuery .

    // Post to the provided URL with the specified parameters.
    function post(path, parameters) {
        var form = $('
    ');
    
        form.attr("method", "post");
        form.attr("action", path);
    
        $.each(parameters, function(key, value) {
            var field = $('');
    
            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();
    }
    
    ответ дан Ryan Delucchi, с репутацией 4897, 4.04.2011
  • 62 рейтинг

    Простая и быстрая реализация @Aaron:

    document.body.innerHTML += '
    ';
    document.getElementById("dynForm").submit();
    

    Конечно, вы должны использовать JavaScript-фреймворк, такой как Prototype или jQuery . , ,

    ответ дан Alexandre Victoor, с репутацией 2361, 25.09.2008
  • 51 рейтинг

    Используя функцию 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);
    }
    
    ответ дан Jonny Buchanan, с репутацией 47884, 25.09.2008
  • 35 рейтинг

    Ответ Ракеш Пая удивителен, но есть проблема, которая возникает для меня (в 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!
    
    ответ дан Kendall Hopkins, с репутацией 26770, 15.07.2010
  • 27 рейтинг

    Нет, вы не можете получить запрос на публикацию JavaScript как отправку формы.

    Вы можете получить форму в HTML, а затем отправить ее с помощью JavaScript. (как много раз объяснялось на этой странице)

    Вы можете создать HTML самостоятельно, вам не нужен JavaScript для написания HTML. Это было бы глупо, если бы люди предложили это.

     
    

    Ваша функция просто настроит форму так, как вы этого хотите.

    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;
    }
    

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

    ответ дан gaby de wilde, с репутацией 769, 19.08.2013
  • 24 рейтинг

    Если у вас установлен 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();
    
    ответ дан Head, с репутацией 3376, 23.01.2009
  • 19 рейтинг

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

    простой 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, с репутацией 9175, 22.03.2012
  • 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, с репутацией 1726, 27.01.2014
  • 15 рейтинг

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

    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});
    
    ответ дан Joseph Holsten, с репутацией 8720, 25.09.2008
  • 11 рейтинг

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

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

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

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

    ответ дан Alan Storm, с репутацией 126941, 25.09.2008
  • 11 рейтинг

    Вот как я написал это, используя jQuery. Протестировано в Firefox и Internet Explorer.

    function postToUrl(url, params, newWindow) {
        var form = $('
    '); form.attr('action', url); form.attr('method', 'POST'); if(newWindow){ form.attr('target', '_blank'); } var addParam = function(paramName, paramValue) { var input = $(''); input.attr({ 'id': paramName, 'name': paramName, 'value': paramValue }); form.append(input); }; // Params is an Array. if(params instanceof Array){ for(var i=0; i
    ответ дан beauburrier, с репутацией 910, 21.09.2010
  • 9 рейтинг

    Я бы пошел по маршруту 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, с репутацией 964, 25.09.2008
  • 7 рейтинг

    Самый простой способ - использовать 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.

    Затем в обработчике успеха перенаправить браузер с чем-то вроде окна. место нахождения.

    ответ дан JLavoie, с репутацией 5302, 10.09.2013
  • 3 рейтинг

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

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

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

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

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

    ответ дан ChintanThummar, с репутацией 670, 29.03.2013
  • 2 рейтинг

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

    ответ дан AnthonyWJones, с репутацией 160565, 25.09.2008
  • 2 рейтинг

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

    ответ дан Bill Turner, с репутацией 3585, 25.09.2008
  • 2 рейтинг

    Я использую документ. формирует java и зацикливает его, чтобы получить все элементы в форме, а затем отправляет через xhttp. Так что это мое решение для отправки javascript / ajax (со всеми HTML, включенными в качестве примера):

              
               
               
    First name:
    Last name:
    Addr1:
    City:
    ответ дан drtechno, с репутацией 143, 20.01.2018
  • 2 рейтинг

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

    function post(url, params, urlEncoded, newWindow) {
        var 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 $('').attr({name: fullname, value: value}).appendTo(form);
        };
    
        addParam('', params, '');
    
        $('body').append(form);
        form.submit();
    }
    
    ответ дан bobef, с репутацией 729, 27.05.2011
  • 2 рейтинг

    Это похоже на вариант 2 Алана (выше). Как создать экземпляр http obj, оставлено в качестве упражнения.

    httpobj.open("POST", url, true);
    httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
    httpobj.onreadystatechange=handler;
    httpobj.send(post);
    
    ответ дан R. Van Hoose, с репутацией 173, 25.09.2008
  • 2 рейтинг

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

    ответ дан lingceng, с репутацией 1700, 21.11.2015
  • 2 рейтинг

    Еще одно рекурсивное решение , поскольку некоторые из них, похоже, не работают (я не проверял их все). Это зависит от 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, с репутацией 117292, 11.05.2016
  • 1 рейтинг

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

        
     
        document.getElementById('fielda').value="some text for field a";
        document.getElementById('fieldb').innerHTML="some text for multiline fieldb";
        form1.submit();
    

    Применение автоматической отправки

    Приложение автоматической отправки будет направлять значения формы, которые пользователь автоматически помещает на другой странице, обратно на эту страницу. Такое приложение будет выглядеть так:

    fieldapost=
    ответ дан rauprog, с репутацией 117, 25.09.2017
  • 1 рейтинг

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

    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, с репутацией 859, 6.03.2018
  • 0 рейтинг

    Мое решение будет кодировать глубоко вложенные объекты, в отличие от принятого в настоящее время решения @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, с репутацией 719, 31.08.2018
  • 0 рейтинг

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

    https: // github. ком / mgalante / JQuery. перенаправление / блоб / ведущий / JQuery. перенаправления. JS

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

    $.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
    
    ответ дан OG Sean, с репутацией 584, 9.07.2018
  • -2 рейтинг

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

    ответ дан Diodeus - James MacFarlane, с репутацией 92601, 25.09.2008