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

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

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

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

<form action="http://example.com/" method="POST">
  <input type="hidden" name="q" value="a">
</form>

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

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

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

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

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

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

25.09.2008 15:15:43
Как упоминалось в другом потоке, есть плагин jquery «.redirect», который работает с методом POST или GET. Он создает форму со скрытыми входными данными и представляет ее для вас. Пример: $ .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
OG Sean 9.07.2018 00:16:59
30 ОТВЕТОВ
РЕШЕНИЕ

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

2127
3.05.2019 20:47:35
А как насчет массивов в параметрах данных? Jquery post () интерпретирует, например: «data: {array: [1, 2, 3]}» как? Array = 1 & array = 2 & array = 3. Вис код дает другой результат.
Scit 14.10.2015 06:36:35
Предупреждение. Несмотря на множество отрицательных отзывов, это решение ограничено и не обрабатывает массивы или вложенные объекты внутри формы. В противном случае это отличный ответ.
emragins 20.10.2015 16:41:21
Удивительно, что это не поддерживается ни html, ни javascript, ни jquery. Вы должны написать это.
eugene 17.02.2016 08:02:56
@mricci Смысл этого фрагмента - перенаправить браузер на новый URL-адрес, указанный действием; если вы остаетесь на той же странице, вы можете просто использовать традиционный AJAX для размещения ваших данных. Поскольку браузер должен переходить на новую страницу, содержимое DOM текущей страницы не имеет значения
Ken Bellows 7.07.2016 13:07:15
Пользователи Python, Django и, возможно, Flask увидят эту ошибку: «Запрещено (403). Ошибка проверки CSRF. Запрос отменен.», Если создается форма с нуля. В этом случае вы должны передать токен csrf следующим образом: post ('/ contact /', {name: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()});
Davidson Lima 22.11.2017 16:09:19

Это будет версия выбранного ответа с использованием 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();
}
128
24.10.2012 12:26:27
Исправлено: теперь добавление к document.body
Ryan Delucchi 5.04.2011 21:01:21
Немного изменено это для поддержки массивов и объектов gist.github.com/hom3chuk/692bf12fe7dac2486212
НЛО 28.09.2015 22:39:29
Если значение содержит символ XML dangeours, это не сработает в ASP.NET. EncodeUriComponent (значение) не требуется. Затем UrlDecode также требуется на стороне сервера.
Stefan Steiger 13.03.2018 16:26:31
Если ваши потребности просты, то эта функция не нужна. Этого однострочника достаточно:$("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
rinogo 17.07.2019 19:31:24

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

69
10.03.2012 17:12:33
Есть ли способ сделать это без загрузки веб-страницы в текущем окне / вкладке браузера?
pbreitenbach 24.09.2010 20:37:10

Использование 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);
}
54
23.05.2017 10:31:38
Вам нужно удалить ребенка после подачи? В любом случае страница не уходит?
Nils 31.05.2012 22:31:44
Нет смысла удалять дочерний элемент после отправки, кроме случаев, когда используется сеанс и эти данные сохраняются.
Miloš 20.07.2012 07:07:53
@CantucciHQ Страница также может остаться неизменной, даже если цель формы не установлена. Существует 204 No Content , например.
Eugene Ryabtsev 30.01.2014 11:41:19

Ответ Ракеш Пая удивителен, но есть проблема, которая возникает у меня (в 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!
38
16.01.2018 21:54:58
2018 и все же не лучший ответ?
iiirxs 20.06.2018 13:35:43

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

Если у вас установлен 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
8.10.2012 06:09:26

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

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

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

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
25.09.2008 16:05:21

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

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

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

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

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

12
10.03.2012 17:08:32
XMLHTTPRequest не обновляет окно. Вы пытаетесь сказать, что я должен закончить AJAX с document.write (http.responseText)?
Joseph Holsten 25.09.2008 16:12:49
Зачем нужно добавлять 30k + в его проект, если он не делает ничего другого с фреймворком?
Dementic 7.11.2011 15:26:03

Я бы пошел по маршруту 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");
12
21.08.2014 09:21:43
Uncaught ReferenceError: QueryString не определено.
Chase Roberts 12.05.2015 03:34:47

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

11
19.06.2014 18:57:24
Вы не упомянули, что предлагаемый вами подход основан на библиотеке JavaScript jQuery .
DavidRR 15.12.2013 01:32:15
Вы также упустили суть вопроса - он хочет «направить браузер на другую страницу», а не делать запрос ajax.
Black 3.04.2014 00:21:46
Вы можете дождаться ответа, а затем document.location = {url}; Единственное место, которое я могу себе представить, это не сработает, если вы перенаправляете на загрузку файла.
Epirocks 21.03.2017 10:42:46

Вот как я написал это, используя 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();
}
11
6.05.2018 09:01:32
Работал на меня. Спасибо. (Проверено в Chrome)
dannie.f 23.12.2010 13:43:42
Я думаю, что проблема здесь может заключаться в том, что форма удаляется до возвращения представления. Я слышал, что в некоторых браузерах, если вы переместите или удалите форму до завершения отправки, обработчики не сработают. Вместо этого удалите форму из документа в обработчике.
Jeff DQ 12.05.2011 00:18:18
Работает как шарм. Протестировано на Firefox + Chrome + IE11 - Большое спасибо за это!
Deunz 28.06.2016 11:41:31

Библиотека 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();
};
6
10.03.2012 17:10:24
Это решение является одним из немногих, которое не заменяет отображаемый в данный момент документ возвратом ответа сервера.
dothebart 30.12.2015 16:54:54

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

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

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

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

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

4
6.05.2018 09:06:51

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

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

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

2
21.11.2015 09:07:14

Это как вариант Алана 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
25.09.2008 15:40:48

Это основано на коде 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
27.05.2011 13:19:34

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

1
10.03.2012 17:05:18

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

1
10.03.2012 17:05:56
Обратите внимание, что $ .post является только AJAX.
Bryan Larsen 27.03.2012 12:49:27

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

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

    <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
25.09.2017 08:37:10

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

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
6.03.2018 23:14:25

Ни одно из вышеупомянутых решений не обрабатывало вложенные параметры с помощью только 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: код был взят из плагина перенаправления . Я просто упростил это для своих нужд.

0
10.12.2019 09:32:55

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

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

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

0
8.01.2020 14:01:06

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

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

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

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
-1
9.07.2018 00:22:21
Это также было упомянуто здесь: stackoverflow.com/questions/8389646/…
OG Sean 9.07.2018 00:22:51

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

-2
25.09.2008 15:22:14
Использование XMLHttpRequest не приведет к переходу браузера на другую страницу.
Jonny Buchanan 25.09.2008 15:35:19