JavaScript-Post-Anfrage wie ein Formular senden

Ich versuche, einen Browser auf eine andere Seite zu leiten. Wenn ich eine GET-Anfrage haben wollte, könnte ich sagen

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

Die Ressource, auf die ich zugreifen möchte, reagiert jedoch nur dann ordnungsgemäß, wenn ich eine POST-Anforderung verwende. Wenn dies nicht dynamisch generiert würde, könnte ich den HTML-Code verwenden

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

Dann würde ich einfach das Formular vom DOM einreichen.

Aber ich hätte wirklich gerne JavaScript-Code, mit dem ich sagen kann

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

Was ist die beste browserübergreifende Implementierung?

Bearbeiten

Es tut mir leid, dass ich nicht klar war. Ich brauche eine Lösung, die den Speicherort des Browsers ändert, genau wie das Senden eines Formulars. Wenn dies mit XMLHttpRequest möglich ist , ist dies nicht offensichtlich. Und dies sollte weder asynchron sein noch XML verwenden, daher ist Ajax nicht die Antwort.

Erstellen Sie <input>s dynamisch in einem Formular und senden Sie es ab

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

Beispiel:

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

EDIT : Da dies so sehr positiv bewertet wurde, schätze ich, dass die Leute dies viel kopieren werden. Also habe ich die hasOwnPropertyPrüfung hinzugefügt , um versehentliche Fehler zu beheben.

Dies wäre eine Version der ausgewählten Antwort mit 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();
}

Eine einfache, schnelle und schmutzige Implementierung der @ Aaron-Antwort:

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

Natürlich sollten Sie lieber ein JavaScript-Framework wie Prototype oder jQuery verwenden ...

Verwenden der createElementin dieser Antwort angegebenen Funktion , die aufgrund der Zerbrochenheit des IE mit dem Namensattribut für Elemente erforderlich ist, die normalerweise mit document.createElementfolgenden Elementen erstellt wurden :

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

Die Antwort von Rakesh Pai ist erstaunlich, aber es gibt ein Problem, das bei mir (in Safari ) auftritt, wenn ich versuche, ein Formular mit einem Feld namens zu veröffentlichen submit. Zum Beispiel post_to_url("http://google.com/",{ submit: "submit" } );. Ich habe die Funktion leicht gepatcht, um diese variable Raumkollision zu umgehen.

    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!

Nein. Sie können die JavaScript-Post-Anfrage nicht wie ein Formular senden lassen.

Was Sie haben können, ist ein Formular in HTML, und senden Sie es dann mit dem JavaScript. (wie oft auf dieser Seite erklärt).

Sie können den HTML-Code selbst erstellen. Sie benötigen kein JavaScript, um den HTML-Code zu schreiben. Das wäre dumm, wenn die Leute das vorschlagen würden.

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

Ihre Funktion würde das Formular nur so konfigurieren, wie Sie es möchten.

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

Dann benutze es wie.

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

Aber ich würde die Funktion einfach weglassen und einfach tun.

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

Schließlich geht die Stilentscheidung in die ccs-Datei.

#ninja{ 
  display:none;
}

Persönlich denke ich, dass Formulare namentlich angesprochen werden sollten, aber das ist momentan nicht wichtig.

Wenn Sie Prototype installiert haben, können Sie den Code straffen, um das versteckte Formular wie folgt zu generieren und zu senden:

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

Dies ist die Antwort von Rakesh, aber mit Unterstützung für Arrays (was in Formen durchaus üblich ist):

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

Oh, und hier ist die jquery-Version: (etwas anderer Code, läuft aber auf dasselbe hinaus)

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

Eine Lösung besteht darin, das Formular zu generieren und einzureichen. Eine Implementierung ist

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

So kann ich mit einem einfachen ein URL-Verkürzungs-Lesezeichen implementieren

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

Ich wünschte, ich hätte alle anderen Beiträge gelesen, damit ich keine Zeit verlieren würde, dies aus Rakesh Pais Antwort zu erstellen. Hier ist eine rekursive Lösung, die mit Arrays und Objekten funktioniert. Keine Abhängigkeit von jQuery.

Es wurde ein Segment hinzugefügt, um Fälle zu behandeln, in denen das gesamte Formular wie ein Array gesendet werden soll. (dh wo es kein Wrapper-Objekt um eine Liste von Elementen gibt)

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

Drei Möglichkeiten hier.

1. Standard JavaScript Antwort: Verwenden Sie ein Framework! Die meisten Ajax-Frameworks haben Sie auf einfache Weise abstrahiert, um einen XMLHTTPRequest- POST zu erstellen .

2. Stellen Sie die XMLHTTPRequest-Anforderung selbst und übergeben Sie den Beitrag an die open-Methode, anstatt get. (Weitere Informationen finden Sie unter Verwenden der POST-Methode in XMLHTTPRequest (Ajax) .)

3. Erstellen Sie über JavaScript dynamisch ein Formular, fügen Sie eine Aktion hinzu, fügen Sie Ihre Eingaben hinzu und senden Sie diese.

Ich würde den Ajax-Weg gehen, wie andere vorgeschlagen hatten, mit:

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

Der einfachste Weg ist die Verwendung von Ajax Post Request:

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

wo:

• Daten sind ein Objekt
• Datentyp sind die vom Server erwarteten Daten (XML, JSON, Skript, Text, HTML).
• url ist die Adresse Ihres RESt-Servers oder einer Funktion auf der Serverseite, die den HTTP-POST akzeptiert.

Leiten Sie dann im Success-Handler den Browser mit so etwas wie window.location um.

So habe ich es mit jQuery geschrieben. Getestet in Firefox und 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();
}

Die Prototypbibliothek enthält ein Hashtable-Objekt mit der Methode ".toQueryString ()", mit der Sie ein JavaScript-Objekt / eine JavaScript-Struktur einfach in eine Zeichenfolge im Stil einer Abfragezeichenfolge umwandeln können. Da für den Beitrag der "Hauptteil" der Anforderung eine mit einer Abfragezeichenfolge formatierte Zeichenfolge sein muss, kann Ihre Ajax-Anforderung ordnungsgemäß als Beitrag verwendet werden. Hier ist ein Beispiel mit 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();
};

Das funktioniert in meinem Fall perfekt:

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

Sie können es in folgenden Funktionen verwenden:

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

Hiermit können Sie alle Werte von Eingaben veröffentlichen.

Noch eine rekursive Lösung, da einige von anderen kaputt zu sein scheinen (ich habe nicht alle getestet). Dieser hängt von lodash 3.x und ES6 ab (jQuery nicht erforderlich):

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

Meine Lösung codiert tief verschachtelte Objekte, im Gegensatz zu der derzeit von @RakeshPai akzeptierten Lösung.

Es verwendet die 'qs' npm-Bibliothek und ihre Stringify-Funktion, um verschachtelte Objekte in Parameter umzuwandeln.

Dieser Code funktioniert gut mit einem Rails-Backend, obwohl Sie ihn ändern sollten, um mit jedem benötigten Backend zu arbeiten, indem Sie die an stringify übergebenen Optionen ändern. Für Rails muss arrayFormat auf "Klammern" gesetzt sein.

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

Beispiel:

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

Erzeugt diese Rails-Parameter:

{"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 ist eine Option. Aber FormObject wird derzeit von den meisten Browsern nicht unterstützt.

Dies ist wie Alans Option 2 (oben). Wie man den httpobj instanziiert, bleibt als Übung übrig.

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

Dies basiert auf dem Code von beauSD mit jQuery. Es wurde verbessert, sodass es rekursiv für Objekte funktioniert.

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

Sie können das Formular dynamisch mit DHTML hinzufügen und dann senden.

Sie können eine Bibliothek wie jQuery und die Methode $ .post verwenden .

Ich benutze das document.forms Java und schleife es, um alle Elemente im Formular zu erhalten, und sende es dann über xhttp. Das ist also meine Lösung für Javascript / Ajax Submit (mit allem HTML als Beispiel):

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

Sie können die Trigger-Methode von jQuery verwenden, um das Formular zu senden, genau wie Sie eine Taste drücken.

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

es wird im Browser gesendet.

Die Methode, mit der ich einen Benutzer automatisch poste und auf eine andere Seite leite, besteht darin, einfach ein verstecktes Formular zu schreiben und es dann automatisch zu senden. Seien Sie versichert, dass das versteckte Formular absolut keinen Platz auf der Webseite einnimmt. Der Code wäre ungefähr so:

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

Anwendung der automatischen Übermittlung

Eine Anwendung einer automatischen Übermittlung würde Formularwerte, die der Benutzer automatisch auf der anderen Seite eingibt, auf diese Seite zurückleiten. Eine solche Anwendung wäre wie folgt:

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

Hier ist, wie ich es mache.

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

Keine der oben genannten Lösungen hat tief verschachtelte Parameter nur mit jQuery verarbeitet. Hier ist meine Zwei-Cent-Lösung.

Wenn Sie jQuery verwenden und tief verschachtelte Parameter verarbeiten müssen, können Sie die folgende Funktion verwenden:

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

Hier ist ein Beispiel für die Verwendung. Der HTML-Code:

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

Wenn Sie auf die Schaltfläche Test klicken, wird das Formular veröffentlicht und in POST werden die folgenden Werte angezeigt:

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

Hinweis: Wenn Sie das Formular an eine andere URL als die aktuelle Seite senden möchten, können Sie die URL als zweites Argument der Funktion postForm angeben.

Also zum Beispiel (um Ihr Beispiel wiederzuverwenden):

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

Hoffe das hilft.

Hinweis 2: Der Code wurde aus dem Redirect-Plugin übernommen . Ich habe es im Grunde nur für meine Bedürfnisse vereinfacht.

jQuery-Plugin zur Umleitung mit POST oder GET:

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

Fügen Sie zum Testen die obige .js-Datei hinzu oder kopieren / fügen Sie die Klasse in Ihren Code ein. Verwenden Sie dann den Code hier und ersetzen Sie "args" durch Ihre Variablennamen und "values" durch die Werte der jeweiligen Variablen:

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

Sie können einen AJAX-Aufruf tätigen (wahrscheinlich mithilfe einer Bibliothek wie Prototype.js oder JQuery). AJAX kann sowohl GET- als auch POST-Optionen verarbeiten.