Запит на публікацію JavaScript, як надіслати форму


1530

Я намагаюся перенаправити браузер на іншу сторінку. Якби я хотів отримати GET запит, я можу сказати

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

Але ресурс, до якого я намагаюся отримати доступ, не відповість належним чином, якщо я не використовую запит POST. Якби це не динамічно генерувалося, я можу використовувати HTML

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

Тоді я б просто подав форму від DOM.

Але насправді мені хотілося б коду JavaScript, який дозволяє мені сказати

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

Яка найкраща крос-браузерна реалізація?

Редагувати

Вибачте, що мені було не ясно. Мені потрібно рішення, яке змінює розташування веб-переглядача, як і подання форми. Якщо це можливо за допомогою XMLHttpRequest , це не очевидно. І це не повинно бути асинхронним, а також не використовувати XML, тому Ajax - це не відповідь.


1
Як було сказано в іншому потоці, існує плагін jquery ".redirect", який працює з методом POST або GET. Він створює форму із прихованими входами та подає її вам. Наприклад: $ .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
OG Sean

Відповіді:


2144

Динамічно створіть <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'});

EDIT : Оскільки ця ситуація настільки популярна, я здогадуюсь, що люди будуть це багато копіювати. Тому я додав hasOwnPropertyчек, щоб виправити будь-які випадкові помилки.


10
Що з масивами в парамах даних? Jquery post () інтерпретує наприклад: "data: {array: [1, 2, 3]}" як? Array = 1 & array = 2 & array = 3. Код Whis дає ще один результат.
Світ

18
Попередження: Незважаючи на багато оновлень, це рішення є обмеженим і не обробляє масиви чи вкладені об'єкти всередині форми. Інакше це чудова відповідь.
emragins

3
дивно, що це не підтримується ні HTML, ні JavaScript, а не jquery .. Ви повинні це кодувати.
Євген

14
@mricci Суть цього фрагмента полягає у перенаправленні браузера на нову URL-адресу, вказану дією; якщо ви залишаєтесь на одній сторінці, ви можете просто використовувати традиційний AJAX, щоб розмістити свої дані. Оскільки браузер повинен переходити на нову сторінку, вміст DOM поточної сторінки не має значення
Кен Беллоуз

6
Користувачі Python, Django та, ймовірно, Flask побачать цю помилку: "Заборонено (403). Перевірка CSRF не вдалася. Запит скасовано.") Якщо створити форму з нуля. У цьому випадку ви повинні передати маркер csrf таким чином: post ('/ contact /', {name: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()});
Девідсон Ліма

129

Це буде версія обраної відповіді за допомогою jQuery .

// Post to the provided URL with the specified parameters.
function post(path, parameters) {
    var form = $('<form></form>');

    form.attr("method", "post");
    form.attr("action", path);

    $.each(parameters, function(key, value) {
        var field = $('<input></input>');

        field.attr("type", "hidden");
        field.attr("name", key);
        field.attr("value", value);

        form.append(field);
    });

    // The form needs to be a part of the document in
    // order for us to be able to submit it.
    $(document.body).append(form);
    form.submit();
}

2
Виправлено: тепер додається до document.body
Райан Делуччі

7
Трохи модифікуйте це для підтримки масивів і об’єктів gist.github.com/hom3chuk/692bf12fe7dac2486212
НЛО

3
Якщо значення містить символ xml dangeours, це не працюватиме в коду ASP.NETUriComponent (значення). Тоді UrlDecode також потрібен на стороні сервера.
Стефан Штайгер

Якщо ваші потреби прості, то ця функція зайва. Цього одного лайнера достатньо:$("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
rinogo

71

Проста швидка та брудна реалізація відповіді @Aaron:

document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>';
document.getElementById("dynForm").submit();

Звичайно, вам слід скористатися рамками JavaScript, такими як Prototype або jQuery ...


6
Чи можна це зробити, не завантажуючи веб-сторінку в поточне вікно / вкладку браузера?
pbreitenbach

54

Використовуючи createElementфункцію, надану у цій відповіді , яка необхідна через розбитість IE з атрибутом name на елементи, створені нормально за допомогою document.createElement:

function postToURL(url, values) {
    values = values || {};

    var form = createElement("form", {action: url,
                                      method: "POST",
                                      style: "display: none"});
    for (var property in values) {
        if (values.hasOwnProperty(property)) {
            var value = values[property];
            if (value instanceof Array) {
                for (var i = 0, l = value.length; i < l; i++) {
                    form.appendChild(createElement("input", {type: "hidden",
                                                             name: property,
                                                             value: value[i]}));
                }
            }
            else {
                form.appendChild(createElement("input", {type: "hidden",
                                                         name: property,
                                                         value: value}));
            }
        }
    }
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

6
Чи потрібно вилучити дитину після подання? Чи все-таки сторінка не йде?
Нільс

2
Немає жодної користі для видалення дитини після подання, за винятком випадків, коли використовується сеанс і ці дані зберігаються.
Мілош

6
@CantucciHQ Сторінка може залишатися незмінною, навіть якщо ціль форми не встановлена. Існує 204 No Content , наприклад.
Євген Рябцев

38

Відповідь Ракеша Пая дивовижна, але є питання, яке виникає у мене (в Safari ), коли я намагаюся розмістити форму з полем під назвою submit. Наприклад, post_to_url("http://google.com/",{ submit: "submit" } );. Я трохи зафіксував функцію, щоб обходити це зіткнення мінливого простору.

    function post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        //Move the submit function to another variable
        //so that it doesn't get overwritten.
        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_(); //Call the renamed function.
    }
    post_to_url("http://google.com/", { submit: "submit" } ); //Works!

7
2018 рік і все ще не краща відповідь?
iiirxs

30

Ні. Ви не можете надіслати запит на отримання JavaScript, як надіслати форму.

Ви можете мати форму в HTML, а потім надіслати її за допомогою JavaScript. (як багато разів пояснено на цій сторінці).

Ви можете створити HTML самостійно, для написання HTML вам не потрібен JavaScript. Це було б нерозумно, якби люди це пропонували.

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

Ваша функція просто налаштувала б форму так, як ви цього хочете.

function postToURL(a,b,c){
   document.getElementById("ninja").action     = a;
   document.getElementById("donaldduck").name  = b;
   document.getElementById("donaldduck").value = c;
   document.getElementById("ninja").submit();
}

Потім використовуйте його як.

postToURL("http://example.com/","q","a");

Але я би просто відмовився від функції і просто зробив.

document.getElementById('donaldduck').value = "a";
document.getElementById("ninja").submit();

Нарешті, рішення стилю йде у файлі ccs.

#ninja{ 
  display:none;
}

Особисто я думаю, що форми потрібно вирішувати на ім'я, але це зараз не важливо.


26

Якщо у вас встановлений прототип , ви можете підтягнути код для створення та подання прихованої форми на зразок цієї:

 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

це відповідь rakesh, але з підтримкою масивів (що досить часто зустрічається у формах):

звичайний 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(); 
}

3
ps мені зараз подобається використовувати цю функцію, але замість того, щоб подавати форму наприкінці, я просто повертаю її назад абоненту. таким чином я можу легко встановити додаткові атрибути або робити інші речі з нею, якщо потрібно.
kritzikratzi

3
Чудово! дуже корисний. Невелика зміна для людей, які покладаються на PHP на стороні сервера цієї форми, я змінив addField (ключ, парами [ключ] [i]) на addField (ключ + '[]', парами [ключ] [i]). Це робить $ _POST [ключ] доступним у вигляді масиву.
Тава

2
@Thava ви також можете встановити name = "bla []" у своєму полі введення. у будь-якому випадку, є інші мови, крім php, які не підтримують синтаксис [], тому я залишаю це незмінним.
kritzikratzi

17

Одне рішення - сформувати форму та надіслати її. Одна реалізація

function post_to_url(url, params) {
    var form = document.createElement('form');
    form.action = url;
    form.method = 'POST';

    for (var i in params) {
        if (params.hasOwnProperty(i)) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = i;
            input.value = params[i];
            form.appendChild(input);
        }
    }

    form.submit();
}

Тож я можу реалізувати закладку скорочення URL-адреси за допомогою простого

javascript:post_to_url('http://is.gd/create.php', {'URL': location.href});

16

Ну, хотілося б, щоб я прочитала всі інші пости, щоб я не втрачала часу, створюючи це з відповіді Ракеша Пая. Ось рекурсивне рішення, яке працює з масивами та об'єктами. Відсутність залежності від jQuery.

Додано сегмент для обробки випадків, коли всю форму слід подавати як масив. (тобто там, де немає об’єкта обгортки навколо списку елементів)

/**
 * Posts javascript data to a url using form.submit().  
 * Note: Handles json and arrays.
 * @param {string} path - url where the data should be sent.
 * @param {string} data - data as javascript object (JSON).
 * @param {object} options -- optional attributes
 *  { 
 *    {string} method: get/post/put/etc,
 *    {string} arrayName: name to post arraylike data.  Only necessary when root data object is an array.
 *  }
 * @example postToUrl('/UpdateUser', {Order {Id: 1, FirstName: 'Sally'}});
 */
function postToUrl(path, data, options) {
    if (options === undefined) {
        options = {};
    }

    var method = options.method || "post"; // Set method to post by default if not specified.

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    function constructElements(item, parentString) {
        for (var key in item) {
            if (item.hasOwnProperty(key) && item[key] != null) {
                if (Object.prototype.toString.call(item[key]) === '[object Array]') {
                    for (var i = 0; i < item[key].length; i++) {
                        constructElements(item[key][i], parentString + key + "[" + i + "].");
                    }
                } else if (Object.prototype.toString.call(item[key]) === '[object Object]') {
                    constructElements(item[key], parentString + key + ".");
                } else {
                    var hiddenField = document.createElement("input");
                    hiddenField.setAttribute("type", "hidden");
                    hiddenField.setAttribute("name", parentString + key);
                    hiddenField.setAttribute("value", item[key]);
                    form.appendChild(hiddenField);
                }
            }
        }
    }

    //if the parent 'data' object is an array we need to treat it a little differently
    if (Object.prototype.toString.call(data) === '[object Array]') {
        if (options.arrayName === undefined) console.warn("Posting array-type to url will doubtfully work without an arrayName defined in options.");
        //loop through each array item at the parent level
        for (var i = 0; i < data.length; i++) {
            constructElements(data[i], (options.arrayName || "") + "[" + i + "].");
        }
    } else {
        //otherwise treat it normally
        constructElements(data, "");
    }

    document.body.appendChild(form);
    form.submit();
};

1
Це, мабуть, також не кодує вкладені об'єкти належним чином.
mpen

1
@mpen у вас є загадка?
emragins

1
Ні вибач. Писати себе було досить просто; не варто витрачати час на налагодження.
mpen

12

Тут є три варіанти.

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

  2. Зробіть запит XMLHTTPRequest самостійно, передаючи повідомлення у відкритий метод замість get. (Детальніше про використання методу POST у XMLHTTPRequest (Ajax) .)

  3. За допомогою JavaScript динамічно створюйте форму, додайте дію, додайте свої дані та подайте її.


5
XMLHTTPRequest не оновлює вікно. Ви намагаєтесь сказати, що я повинен закінчити AJAX з document.write (http.responseText)?
Джозеф Холстен

11
Чому варто додати 30k + до свого проекту, якщо він не робить щось інше з рамкою?
Дементік

12

Я б спустився по маршруту Аякс, як пропонували інші:

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");

1
Uncaught ReferenceError: QueryString не визначено.
Чейз Робертс

11

Найпростіший спосіб - це Ajax Post Request:

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

де:

  • дані - об’єкт
  • dataType - це дані, очікувані сервером (xml, json, script, text, html)
  • url - адреса вашого RESt-сервера або будь-якої функції на стороні сервера, яка приймає HTTP-POST.

Тоді в обробник успіху перенаправляє браузер на щось на зразок window.location.


5
Ви не згадали, що запропонований вами підхід базується на бібліотеці JavaScript jQuery .
DavidRR

8
Ви також пропустили суть питання - він хоче "перенаправити браузер на іншу сторінку", а не робити запит на ajax.
Чорний

Ви можете зачекати відповіді, а потім document.location = {url}; Єдине місце, на якому я можу уявити, що це не спрацює, це якщо ви перенаправляєте на завантаження файлу.
Епіроки

11

Ось як я написав це за допомогою jQuery. Тестується в Firefox та Internet Explorer.

function postToUrl(url, params, newWindow) {
    var form = $('<form>');
    form.attr('action', url);
    form.attr('method', 'POST');
    if(newWindow){ form.attr('target', '_blank'); 
  }

  var addParam = function(paramName, paramValue) {
      var input = $('<input type="hidden">');
      input.attr({ 'id':     paramName,
                 'name':   paramName,
                 'value':  paramValue });
      form.append(input);
    };

    // Params is an Array.
    if(params instanceof Array){
        for(var i=0; i<params.length; i++) {
            addParam(i, params[i]);
        }
    }

    // Params is an Associative array or Object.
    if(params instanceof Object) {
        for(var key in params){
            addParam(key, params[key]);
        }
    }

    // Submit the form, then remove it from the page
    form.appendTo(document.body);
    form.submit();
    form.remove();
}

1
Працювали для мене. Дякую. (Випробувано в Chrome)
dannie.f

2
Я думаю, що проблема тут може полягати в тому, що форма видаляється до повернення. Я чув, що в деяких браузерах, якщо ви переміщуєте або видаляєте форму до завершення надсилання, обробники не запускають. Замість цього видаліть форму з документа в обробнику.
Jeff DQ

Працює як шарм. Тестовано на Firefox + Chrome + IE11 - Дякую за це!
Deunz

6

Бібліотека прототипів включає об'єкт Hashtable з методом ".toQueryString ()", який дозволяє легко перетворити об'єкт / структуру JavaScript в рядок стилю запиту. Оскільки публікація вимагає, щоб "тіло" запиту було рядком, відформатованим рядком, це дозволяє вашому запиту Ajax працювати належним чином як повідомлення. Ось приклад використання прототипу:

$req = new Ajax.Request("http://foo.com/bar.php",{
    method: 'post',
    parameters: $H({
        name: 'Diodeus',
        question: 'JavaScript posts a request like a form request',
        ...
    }).toQueryString();
};

1
Це рішення - одне з небагатьох, яке не замінює поточно відображений документ поверненням відповіді сервера.
dothebart

4

У моєму випадку це прекрасно працює:

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

Ви можете використовувати його у такій функції, як:

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

За допомогою цього ви можете розмістити всі значення вхідних даних.


3

Ще одне рекурсивне рішення, оскільки деякі інші здаються порушеними (я не перевіряв їх усіх). Цей залежить від lodash 3.x та ES6 (jQuery не потрібен):

function createHiddenInput(name, value) {
    let input = document.createElement('input');
    input.setAttribute('type','hidden');
    input.setAttribute('name',name);
    input.setAttribute('value',value);
    return input;
}

function appendInput(form, name, value) {
    if(_.isArray(value)) {
        _.each(value, (v,i) => {
            appendInput(form, `${name}[${i}]`, v);
        });
    } else if(_.isObject(value)) {
        _.forOwn(value, (v,p) => {
            appendInput(form, `${name}[${p}]`, v);
        });
    } else {
        form.appendChild(createHiddenInput(name, value));
    }
}

function postToUrl(url, data) {
    let form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', url);

    _.forOwn(data, (value, name) => {
        appendInput(form, name, value);
    });

    form.submit();
}

3

Моє рішення буде кодувати глибоко вкладені об'єкти, на відміну від прийнятого на даний момент рішення @RakeshPai.

Він використовує бібліотеку 'qs' npm та її функцію strify для перетворення вкладених об'єктів у параметри.

Цей код добре працює з бек-ендом Rails, хоча ви повинні мати змогу модифікувати його для роботи з будь-яким запасним сервісом, змінивши параметри, передані для stringify. Rails вимагає, щоб для масивуFormat було встановлено "дужки".

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"]}]}


1

Це як варіант Алана 2 (вище). Як інстанціювати httpobj, залишається як вправа.

httpobj.open("POST", url, true);
httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange=handler;
httpobj.send(post);

1

Це засновано на коді beauSD за допомогою jQuery. Він вдосконалюється, тому працює рекурсивно на об'єктах.

function post(url, params, urlEncoded, newWindow) {
    var form = $('<form />').hide();
    form.attr('action', url)
        .attr('method', 'POST')
        .attr('enctype', urlEncoded ? 'application/x-www-form-urlencoded' : 'multipart/form-data');
    if(newWindow) form.attr('target', '_blank');

    function addParam(name, value, parent) {
        var fullname = (parent.length > 0 ? (parent + '[' + name + ']') : name);
        if(value instanceof Object) {
            for(var i in value) {
                addParam(i, value[i], fullname);
            }
        }
        else $('<input type="hidden" />').attr({name: fullname, value: value}).appendTo(form);
    };

    addParam('', params, '');

    $('body').append(form);
    form.submit();
}

1

Ви можете динамічно додати форму за допомогою DHTML та потім надіслати.



1

Я використовую документ.forms java і циклічно його, щоб отримати всі елементи у формі, а потім надсилаю через 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

Ви можете використовувати метод запуску jQuery, щоб подати форму, як і натискаєте кнопку,

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

він буде представлений у браузері.


0

Метод, який я використовую, щоб автоматично розміщувати та спрямовувати користувача на іншу сторінку, - це просто написати приховану форму, а потім автоматично надіслати її. Будьте впевнені, що прихована форма абсолютно не займає місця на веб-сторінці. Код був би приблизно таким:

    <form name="form1" method="post" action="somepage.php">
    <input name="fielda" type="text" id="fielda" type="hidden">

    <textarea name="fieldb" id="fieldb" cols="" rows="" style="display:none"></textarea>
</form>
    document.getElementById('fielda').value="some text for field a";
    document.getElementById('fieldb').innerHTML="some text for multiline fieldb";
    form1.submit();

Заявка на автоматичну подачу

Застосування автоматичного надсилання буде спрямовувати значення форми, які користувач автоматично вводить на іншій сторінці назад на цю сторінку. Така програма буде приблизно такою:

fieldapost=<?php echo $_post['fielda'];>
if (fieldapost !="") {
document.write("<form name='form1' method='post' action='previouspage.php'>
  <input name='fielda' type='text' id='fielda' type='hidden'>
</form>");
document.getElementById('fielda').value=fieldapost;
form1.submit();
}

0

Ось як я це роблю.

function redirectWithPost(url, data){
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = url;

        for(var key in data){
            var input = document.createElement('input');
            input.name = key;
            input.value = data[key];
            input.type = 'hidden';
            form.appendChild(input)
        }
        document.body.appendChild(form);
        form.submit();
    }

0

Жодне з перерахованих вище рішень не обробляло глибокі вкладені парами просто за допомогою jQuery, тому ось два мої центи.

Якщо ви використовуєте jQuery і вам потрібно обробляти глибокі вкладені параметри, ви можете використовувати цю функцію нижче:

    /**
     * Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
     * I just simplified it for my own taste.
     */
    function postForm(parameters, url) {

        // generally we post the form with a blank action attribute
        if ('undefined' === typeof url) {
            url = '';
        }


        //----------------------------------------
        // SOME HELPER FUNCTIONS
        //----------------------------------------
        var getForm = function (url, values) {

            values = removeNulls(values);

            var form = $('<form>')
                .attr("method", 'POST')
                .attr("action", url);

            iterateValues(values, [], form, null);
            return form;
        };

        var removeNulls = function (values) {
            var propNames = Object.getOwnPropertyNames(values);
            for (var i = 0; i < propNames.length; i++) {
                var propName = propNames[i];
                if (values[propName] === null || values[propName] === undefined) {
                    delete values[propName];
                } else if (typeof values[propName] === 'object') {
                    values[propName] = removeNulls(values[propName]);
                } else if (values[propName].length < 1) {
                    delete values[propName];
                }
            }
            return values;
        };

        var iterateValues = function (values, parent, form, isArray) {
            var i, iterateParent = [];
            Object.keys(values).forEach(function (i) {
                if (typeof values[i] === "object") {
                    iterateParent = parent.slice();
                    iterateParent.push(i);
                    iterateValues(values[i], iterateParent, form, Array.isArray(values[i]));
                } else {
                    form.append(getInput(i, values[i], parent, isArray));
                }
            });
        };

        var getInput = function (name, value, parent, array) {
            var parentString;
            if (parent.length > 0) {
                parentString = parent[0];
                var i;
                for (i = 1; i < parent.length; i += 1) {
                    parentString += "[" + parent[i] + "]";
                }

                if (array) {
                    name = parentString + "[" + name + "]";
                } else {
                    name = parentString + "[" + name + "]";
                }
            }

            return $("<input>").attr("type", "hidden")
                .attr("name", name)
                .attr("value", value);
        };


        //----------------------------------------
        // NOW THE SYNOPSIS
        //----------------------------------------
        var generatedForm = getForm(url, parameters);

        $('body').append(generatedForm);
        generatedForm.submit();
        generatedForm.remove();
    }

Ось приклад того, як ним користуватися. Код HTML:

<button id="testButton">Button</button>

<script>
    $(document).ready(function () {
        $("#testButton").click(function () {
            postForm({
                csrf_token: "abcd",
                rows: [
                    {
                        user_id: 1,
                        permission_group_id: 1
                    },
                    {
                        user_id: 1,
                        permission_group_id: 2
                    }
                ],
                object: {
                    apple: {
                        color: "red",
                        age: "23 days",
                        types: [
                            "golden",
                            "opal",
                        ]
                    }
                },
                the_null: null, // this will be dropped, like non-checked checkboxes are dropped
            });
        });
    });
</script>

Якщо ви натиснете кнопку тесту, вона опублікує форму, і ви отримаєте наступні значення в POST:

array(3) {
  ["csrf_token"] => string(4) "abcd"
  ["rows"] => array(2) {
    [0] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "1"
    }
    [1] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "2"
    }
  }
  ["object"] => array(1) {
    ["apple"] => array(3) {
      ["color"] => string(3) "red"
      ["age"] => string(7) "23 days"
      ["types"] => array(2) {
        [0] => string(6) "golden"
        [1] => string(4) "opal"
      }
    }
  }
}

Примітка: якщо ви хочете опублікувати форму в іншій URL-адресі, ніж на поточній сторінці, ви можете вказати URL як другий аргумент функції postForm.

Так, наприклад (повторно використовувати ваш приклад):

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

Сподіваюсь, це допомагає.

Примітка2: код взято з плагіна переадресації . Я в основному просто спростив це для моїх потреб.


-1

Плагін jQuery для переадресації з POST або GET:

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

Щоб перевірити, включіть вищевказаний файл .js або скопіюйте / вставте клас у свій код, а потім використовуйте тут код, замінюючи "аргументи" своїми іменами змінних, а "значення" - значеннями відповідних змінних:

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

Про це також згадувалося тут: stackoverflow.com/questions/8389646/…
OG Sean

Для нас це рішення все ще працює, якщо ви його проголосували, залиште коментар, чому.
OG Шон

-2

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


5
Використання XMLHttpRequest не перенаправить браузер на іншу сторінку.
Джоні Бюкенан,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.