Richiesta post JavaScript come invio di un modulo

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.

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.

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

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

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

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!

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.

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

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

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

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

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.

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

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.

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

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

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.

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

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

FormObject è un'opzione. Ma FormObject non è supportato dalla maggior parte dei browser ora.

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

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

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

È possibile utilizzare una libreria come jQuery e il suo metodo $ .post .

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>

È 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.

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

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

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.

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

È 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.