Richiesta post JavaScript come invio di un modulo


1531

Sto cercando di indirizzare un browser a un'altra pagina. Se volessi una richiesta GET, potrei dire

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

Ma la risorsa a cui sto tentando di accedere non risponderà correttamente se non utilizzo una richiesta POST. Se questo non fosse generato dinamicamente, potrei usare l'HTML

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

Quindi vorrei solo inviare il modulo dal DOM.

Ma davvero vorrei il codice JavaScript che mi permettesse di dire

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

Qual è la migliore implementazione tra browser?

modificare

Mi dispiace non essere stato chiaro. Ho bisogno di una soluzione che cambi la posizione del browser, proprio come l'invio di un modulo. Se questo è possibile con XMLHttpRequest , non è ovvio. E questo non dovrebbe essere asincrono, né usare XML, quindi Ajax non è la risposta.


1
Come menzionato in un altro thread, esiste un plug-in ".redirect" jquery che funziona con il metodo POST o GET. Crea un modulo con input nascosti e lo invia per te. Es .: $ .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
OG Sean

Risposte:


2145

Crea dinamicamente <input>s in un modulo e invialo

/**
 * 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();
}

Esempio:

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

EDIT : Dal momento che questo è stato votato così tanto, immagino che le persone lo copieranno molto. Quindi ho aggiunto il hasOwnPropertysegno di spunta per correggere eventuali bug involontari.


10
Che dire delle matrici nei parametri dei dati? Jquery post () interpreta ad esempio: "data: {array: [1, 2, 3]}" come? Array = 1 & array = 2 & array = 3. Quale codice fornisce un altro risultato.
Scriva il

18
Avviso: nonostante i numerosi voti positivi, questa soluzione è limitata e non gestisce matrici o oggetti nidificati all'interno di un modulo. Altrimenti è un'ottima risposta.
emragins

3
sorprendente questo non è supportato nativamente né da html né da javascript non jquery .. devi codificare questo.
Eugene,

14
@mricci Il punto di questo frammento è reindirizzare il browser a un nuovo URL specificato dall'azione; se rimani sulla stessa pagina, puoi semplicemente utilizzare AJAX tradizionale per pubblicare i tuoi dati. Dato che il browser dovrebbe navigare verso una nuova pagina, il contenuto del DOM della pagina corrente non avrà importanza
Ken Bellows,

6
Gli utenti di Python, Django e probabilmente Flask vedranno questo errore: "Proibito (403). Verifica CSRF non riuscita. Richiesta interrotta.", Se si crea un modulo da zero. In questo caso, devi passare il token csrf in questo modo: post ('/ contact /', {nome: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()});
Davidson Lima,

129

Questa sarebbe una versione della risposta selezionata usando 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
Risolto: ora aggiunto a document.body
Ryan Delucchi il

7
Leggermente modificato per supportare matrici e oggetti gist.github.com/hom3chuk/692bf12fe7dac2486212
НЛО

3
Se value contiene un carattere xml di dangeours, questo non funzionerà in encodeUriComponent (valore) di ASP.NET. Quindi, UrlDecode è richiesto anche sul lato server.
Stefan Steiger,

Se le tue esigenze sono semplici, questa funzione non è necessaria. Questo one-liner è sufficiente:$("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
rinogo,

71

Una semplice e rapida implementazione della risposta @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();

Ovviamente, dovresti piuttosto usare un framework JavaScript come Prototype o jQuery ...


6
C'è un modo per farlo senza che sia stata caricata una pagina Web nella finestra / scheda del browser corrente?
pbreitenbach,

54

Utilizzando la createElementfunzione fornita in questa risposta , che è necessaria a causa della rottura di IE con l'attributo name sugli elementi creati normalmente con 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
Devi rimuovere il bambino dopo l'invio? La pagina non va via comunque?
Nils,

2
Non è necessario rimuovere il figlio dopo l'invio, tranne se viene utilizzata una sessione e tali dati vengono salvati.
Miloš,

6
@CantucciHQ La pagina potrebbe anche rimanere invariata anche se il target del modulo non è impostato. C'è 204 nessun contenuto , per esempio.
Eugene Ryabtsev,

38

La risposta di Rakesh Pai è sorprendente, ma c'è un problema che si presenta per me (in Safari ) quando provo a inviare un modulo con un campo chiamato submit. Ad esempio post_to_url("http://google.com/",{ submit: "submit" } );,. Ho modificato leggermente la funzione per aggirare questa collisione di spazio variabile.

    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 e non hai ancora una risposta migliore?
iiirxs,

30

No. Non puoi avere la richiesta di post JavaScript come l'invio di un modulo.

Quello che puoi avere è un modulo in HTML, quindi inviarlo con JavaScript. (come spiegato più volte in questa pagina).

Puoi creare tu stesso l'HTML, non è necessario JavaScript per scrivere l'HTML. Sarebbe sciocco se la gente lo suggerisse.

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

La tua funzione configurerebbe semplicemente il modulo nel modo desiderato.

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

Quindi, usalo come.

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

Ma vorrei solo lasciare fuori la funzione e farlo.

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

Infine, la decisione di stile va nel file ccs.

#ninja{ 
  display:none;
}

Personalmente penso che le forme debbano essere affrontate per nome, ma non è importante in questo momento.


26

Se hai installato Prototype , puoi restringere il codice per generare e inviare il modulo nascosto in questo modo:

 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

questa è la risposta di rakesh, ma con il supporto di array (che è abbastanza comune nelle forme):

javascript semplice:

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

oh, ed ecco la versione jquery: (codice leggermente diverso, ma si riduce alla stessa cosa)

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 ora mi diverto ad usare quella funzione ma invece di inviare il modulo alla fine lo restituisco semplicemente al chiamante. in questo modo posso facilmente impostare attributi aggiuntivi o fare altre cose con esso, se necessario.
kritzikratzi,

3
Grande! molto utile. Una piccola modifica per le persone che si affidano a PHP sul lato server di questo modulo, ho modificato addField (chiave, parametri [chiave] [i]) in addField (chiave + '[]', params [chiave] [i]). Questo rende $ _POST [chiave] disponibile come array.
Thava,

2
@Thava potresti anche impostare name = "bla []" sul tuo campo di input. in ogni caso, ci sono lingue diverse da php che non supportano la sintassi [], quindi lascio questo invariato.
kritzikratzi,

17

Una soluzione è generare il modulo e inviarlo. Una implementazione è

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

Quindi posso implementare un bookmarklet accorciamento URL con un semplice

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

16

Bene, vorrei aver letto tutti gli altri post in modo da non perdere tempo a creare questo dalla risposta di Rakesh Pai. Ecco una soluzione ricorsiva che funziona con matrici e oggetti. Nessuna dipendenza da jQuery.

Aggiunto un segmento per gestire i casi in cui l'intero modulo deve essere inviato come un array. (cioè dove non c'è un oggetto wrapper attorno a un elenco di elementi)

/**
 * 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
Anche questo non sembra codificare correttamente gli oggetti nidificati.
mpen

1
@mpen hai un violino?
Emragins,

1
No scusa. È stato abbastanza facile scrivere me stesso; non vale il tempo per il debug.
mpen

12

Tre opzioni qui.

  1. Risposta JavaScript standard: usa un framework! La maggior parte dei framework Ajax ti hanno estratto un modo semplice per creare un POST XMLHTTPRequest .

  2. Fai tu stesso la richiesta XMLHTTPRequest, passando la posta nel metodo aperto invece di ottenere. (Ulteriori informazioni sull'uso del metodo POST in XMLHTTPRequest (Ajax) .)

  3. Tramite JavaScript, crea dinamicamente un modulo, aggiungi un'azione, aggiungi i tuoi input e invialo.


5
XMLHTTPRequest non aggiorna la finestra. Stai cercando di dire che dovrei finire con AJAX con un document.write (http.responseText)?
Joseph Holsten,

11
Perché si dovrebbe aggiungere 30k + al suo progetto se il dosent fa qualcos'altro con il framework?
Demenza

12

Vorrei seguire la strada dell'Ajax come altri hanno suggerito con qualcosa del tipo:

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
Errore di riferimento non rilevato: QueryString non è definito.
Chase Roberts,

11

Il modo più semplice è utilizzare Ajax Post Request:

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

dove:

  • i dati sono un oggetto
  • dataType sono i dati previsti dal server (xml, json, script, text, html)
  • url è l'indirizzo del server RESt o qualsiasi funzione sul lato server che accetta HTTP-POST.

Quindi nel gestore del successo reindirizzare il browser con qualcosa come window.location.


5
Non hai detto che l'approccio che offri si basa sulla libreria JavaScript jQuery .
DavidRR

8
hai anche perso il punto della domanda: vuole "indirizzare un browser a una pagina diversa", non fare una richiesta Ajax.
Nero

Potresti attendere la risposta e poi document.location = {url}; L'unico posto in cui posso immaginare che non funzionerebbe è se stai reindirizzando a un download di file.
Epirocks,

11

Ecco come l'ho scritto usando jQuery. Testato su Firefox e 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
Ha funzionato per me. Grazie. (Testato in Chrome)
dannie.f il

2
Penso che il problema qui potrebbe essere che il modulo viene rimosso prima della restituzione dell'invio. Ho sentito che in alcuni browser se sposti o rimuovi il modulo prima che l'invio sia completato, i gestori non si attiveranno. Rimuovere invece il modulo dal documento nel gestore.
Jeff DQ,

Funziona come un fascino. Testato su Firefox + Chrome + IE11 - Grazie mille per questo!
Deunz,

6

La libreria Prototype include un oggetto Hashtable, con un metodo ".toQueryString ()", che consente di trasformare facilmente un oggetto / struttura JavaScript in una stringa in stile stringa di query. Poiché il post richiede che il "corpo" della richiesta sia una stringa formattata con stringa di query, ciò consente alla richiesta Ajax di funzionare correttamente come post. Ecco un esempio usando Prototype:

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

1
Questa soluzione è una delle poche che non sostituisce il documento attualmente visualizzato con la restituzione della risposta del server.
dothebart,

4

Questo funziona perfettamente nel mio caso:

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

Puoi usarlo in funzione come:

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

Usando questo puoi pubblicare tutti i valori degli input.


3

Ancora un'altra soluzione ricorsiva , dal momento che alcuni altri sembrano essere rotti (non li ho testati tutti). Questo dipende da lodash 3.xe ES6 (jQuery non richiesto):

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

La mia soluzione codificherà oggetti profondamente nidificati, a differenza della soluzione attualmente accettata da @RakeshPai.

Utilizza la libreria npm 'qs' e la sua funzione stringify per convertire oggetti nidificati in parametri.

Questo codice funziona bene con un back-end di Rails, anche se dovresti essere in grado di modificarlo per funzionare con qualsiasi backend di cui hai bisogno modificando le opzioni passate per stringere. Rails richiede che arrayFormat sia impostato su "parentesi".

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

Esempio:

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

Produce questi parametri 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

Questo è come l'opzione 2 di Alan (sopra). Come creare un'istanza di httpobj viene lasciato come esercizio.

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

1

Questo si basa sul codice di beauSD usando jQuery. È stato migliorato e funziona in modo ricorsivo sugli oggetti.

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

È possibile aggiungere dinamicamente il modulo utilizzando DHTML e quindi inviare.



1

Uso document.forms java e lo eseguo in loop per ottenere tutti gli elementi nel modulo, quindi invio tramite xhttp. Quindi questa è la mia soluzione per javascript / ajax submit (con tutto l'html incluso come esempio):

          <!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

È possibile utilizzare il metodo di trigger di jQuery per inviare il modulo, proprio come si preme un pulsante, in questo modo,

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

verrà inviato sul browser.


0

Il metodo che uso per pubblicare e indirizzare automaticamente un utente su un'altra pagina è semplicemente scrivere un modulo nascosto e quindi inviarlo automaticamente. Assicurati che il modulo nascosto non occupi assolutamente spazio sulla pagina web. Il codice sarebbe qualcosa del genere:

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

Domanda di invio automatico

Un'applicazione di un invio automatico dovrebbe indirizzare i valori dei moduli che l'utente inserisce automaticamente nell'altra pagina di nuovo a quella pagina. Tale applicazione sarebbe così:

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

Ecco come lo faccio.

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

Nessuna delle soluzioni di cui sopra ha gestito i parametri annidati profondi con solo jQuery, quindi ecco la mia soluzione a due centesimi.

Se stai usando jQuery e devi gestire parametri nidificati in profondità, puoi utilizzare questa funzione di seguito:

    /**
     * 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();
    }

Ecco un esempio di come usarlo. Il codice 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>

E se fai clic sul pulsante di prova, verrà pubblicato il modulo e otterrai i seguenti valori in 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"
      }
    }
  }
}

Nota: se si desidera inviare il modulo a un altro URL rispetto alla pagina corrente, è possibile specificare l'URL come secondo argomento della funzione postForm.

Ad esempio (per riutilizzare il tuo esempio):

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

Spero che sia di aiuto.

Nota2: il codice è stato preso dal plugin di reindirizzamento . Fondamentalmente l'ho semplicemente semplificato per le mie esigenze.


-1

Plugin jQuery per reindirizzare con POST o GET:

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

Per provare, includi il file .js sopra o copia / incolla la classe nel tuo codice, quindi usa il codice qui, sostituendo "args" con i nomi delle tue variabili e "valori" con i valori delle rispettive variabili:

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

Questo è stato anche menzionato qui: stackoverflow.com/questions/8389646/…
OG Sean

Questa soluzione funziona ancora bene per noi, se hai votato in negativo, lascia un commento sul perché.
OG Sean,

-2

È possibile effettuare una chiamata AJAX (probabilmente utilizzando una libreria come l'utilizzo di Prototype.js o JQuery). AJAX può gestire entrambe le opzioni GET e POST.


5
L'uso di XMLHttpRequest non indirizzerebbe il browser a un'altra pagina.
Jonny Buchanan,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.