Permintaan posting JavaScript seperti formulir kirim

Saya mencoba mengarahkan browser ke halaman lain. Jika saya menginginkan permintaan GET, saya bisa mengatakan

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

Tetapi sumber daya yang saya coba akses tidak akan merespons dengan baik kecuali jika saya menggunakan permintaan POST. Jika ini tidak dihasilkan secara dinamis, saya mungkin menggunakan HTML

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

Maka saya hanya akan menyerahkan formulir dari DOM.

Tapi sungguh saya ingin kode JavaScript yang memungkinkan saya untuk mengatakan

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

Apa implementasi lintas browser terbaik?

Edit

Maaf saya tidak jelas. Saya memerlukan solusi yang mengubah lokasi browser, seperti mengirim formulir. Jika ini dimungkinkan dengan XMLHttpRequest , itu tidak jelas. Dan ini seharusnya tidak asinkron, juga tidak menggunakan XML, jadi Ajax bukanlah jawabannya.

Buat secara dinamis <input>dalam bentuk dan kirimkan

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

Contoh:

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

EDIT : Karena ini telah banyak dinaikkan, saya kira orang akan banyak menyalin-menempel ini. Jadi saya menambahkan tanda hasOwnPropertycentang untuk memperbaiki bug yang tidak disengaja.

Ini akan menjadi versi dari jawaban yang dipilih menggunakan 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();
}

Implementasi sederhana dari @Aaron jawaban cepat dan kotor:

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

Tentu saja, Anda sebaiknya menggunakan kerangka kerja JavaScript seperti Prototipe atau jQuery ...

Menggunakan createElementfungsi yang disediakan dalam jawaban ini , yang diperlukan karena kehancuran IE dengan atribut nama pada elemen yang dibuat secara normal dengan 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);
}

Jawaban Rakesh Pai luar biasa, tetapi ada masalah yang terjadi pada saya (di Safari ) ketika saya mencoba mengirim formulir dengan bidang yang disebut submit. Sebagai contoh post_to_url("http://google.com/",{ submit: "submit" } );,. Saya telah menambal fungsi sedikit untuk berjalan di sekitar tabrakan ruang variabel ini.

    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!

Tidak. Anda tidak dapat memiliki permintaan posting JavaScript seperti mengirim formulir.

Apa yang dapat Anda miliki adalah formulir dalam HTML, lalu kirimkan dengan JavaScript. (seperti yang dijelaskan berulang kali di halaman ini).

Anda dapat membuat HTML sendiri, Anda tidak perlu JavaScript untuk menulis HTML. Itu akan konyol jika orang menyarankan itu.

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

Fungsi Anda hanya akan mengonfigurasi formulir seperti yang Anda inginkan.

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

Lalu, gunakan seperti.

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

Tapi saya hanya akan meninggalkan fungsi dan hanya melakukannya.

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

Akhirnya, keputusan gaya masuk dalam file ccs.

#ninja{ 
  display:none;
}

Secara pribadi saya pikir formulir harus diatasi dengan nama tetapi itu tidak penting saat ini.

Jika Prototipe telah diinstal, Anda dapat mengencangkan kode untuk membuat dan mengirimkan formulir tersembunyi seperti ini:

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

ini adalah jawaban dari rakesh, tetapi dengan dukungan untuk array (yang cukup umum dalam bentuk):

javascript biasa:

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, dan inilah versi jquery: (kode yang sedikit berbeda, tetapi bermuara pada hal yang sama)

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

Salah satu solusinya adalah menghasilkan formulir dan mengirimkannya. Salah satu implementasi adalah

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

Jadi saya bisa menerapkan bookmarklet pemendekan URL dengan sederhana

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

Yah, seandainya saya telah membaca semua posting lain sehingga saya tidak kehilangan waktu membuat ini dari jawaban Rakesh Pai. Inilah solusi rekursif yang bekerja dengan array dan objek. Tidak ada ketergantungan pada jQuery.

Menambahkan segmen untuk menangani kasus-kasus di mana seluruh formulir harus diserahkan seperti array. (mis. di mana tidak ada objek pembungkus di sekitar daftar item)

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

Tiga opsi di sini.

1. Jawaban JavaScript standar: Gunakan kerangka kerja! Sebagian besar kerangka kerja Ajax akan mengabstraksi Anda cara mudah untuk membuat POST XMLHTTPRequest .

2. Buat sendiri permintaan XMLHTTPRequest, lewat pos ke metode terbuka alih-alih dapatkan. (Informasi lebih lanjut dalam Menggunakan metode POST dalam XMLHTTPRequest (Ajax) .)

3. Melalui JavaScript, buat formulir secara dinamis, tambahkan tindakan, tambahkan input Anda, dan kirimkan.

Saya akan menempuh rute Ajax seperti yang orang lain sarankan dengan sesuatu seperti:

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

Cara termudah menggunakan Ajax Post Request:

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

dimana:

• data adalah objek
• dataType adalah data yang diharapkan oleh server (xml, json, script, teks, html)
• url adalah alamat server RESt Anda atau fungsi apa pun di sisi server yang menerima HTTP-POST.

Kemudian pada pengendali sukses, arahkan kembali browser dengan sesuatu seperti window.location.

Inilah cara saya menulisnya menggunakan jQuery. Diuji dalam Firefox dan 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();
}

The Prototype perpustakaan termasuk objek Hashtable, dengan metode ".toQueryString ()", yang memungkinkan Anda untuk dengan mudah mengubah JavaScript objek / struktur menjadi gaya permintaan-string string. Karena posting membutuhkan "badan" permintaan untuk menjadi string yang diformat string-kueri, ini memungkinkan permintaan Ajax Anda untuk berfungsi dengan baik sebagai posting. Berikut ini contoh menggunakan Prototipe:

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

Ini berfungsi dengan baik dalam kasus saya:

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

Anda dapat menggunakannya dalam fungsi seperti:

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

Dengan ini, Anda dapat memposting semua nilai input.

Namun solusi rekursif lain , karena beberapa yang lain tampaknya rusak (saya tidak menguji semuanya). Yang ini tergantung pada lodash 3.x dan ES6 (jQuery tidak diperlukan):

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

Solusi saya akan menyandikan objek yang sangat bersarang, tidak seperti solusi yang saat ini diterima oleh @RakeshPai.

Ia menggunakan pustaka npm 'qs' dan fungsi penguraiannya untuk mengubah objek bersarang menjadi parameter.

Kode ini berfungsi baik dengan back-end Rails, meskipun Anda harus dapat memodifikasinya agar berfungsi dengan backend apa pun yang Anda butuhkan dengan memodifikasi opsi yang dilewatkan untuk dirubah. Rails mengharuskan arrayFormat disetel ke "tanda kurung".

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

Contoh:

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

Menghasilkan parameter Rails ini:

{"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 adalah opsi. Tetapi FormObject tidak didukung oleh sebagian besar browser sekarang.

Ini seperti opsi Alan 2 (di atas). Bagaimana instantiate httpobj dibiarkan sebagai latihan.

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

Ini didasarkan pada kode beauSD menggunakan jQuery. Ini ditingkatkan sehingga bekerja secara rekursif pada objek.

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

Anda dapat menambahkan formulir secara dinamis menggunakan DHTML lalu mengirim.

Anda bisa menggunakan perpustakaan seperti jQuery dan metode $ .post-nya .

Saya menggunakan java document.forms dan loop untuk mendapatkan semua elemen dalam formulir, kemudian kirim melalui xhttp. Jadi ini solusi saya untuk mengirimkan javascript / ajax (dengan semua html disertakan sebagai contoh):

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

Anda dapat menggunakan metode pemicu jQuery untuk mengirimkan formulir, sama seperti Anda menekan tombol, seperti,

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

itu akan dikirimkan di browser.

Metode yang saya gunakan untuk mengirim dan mengarahkan pengguna secara otomatis ke halaman lain adalah dengan hanya menulis formulir tersembunyi dan kemudian secara otomatis mengirimkannya. Yakinlah bahwa formulir tersembunyi sama sekali tidak memakan ruang di halaman web. Kode akan menjadi seperti ini:

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

Aplikasi kirim otomatis

Aplikasi pengiriman otomatis akan mengarahkan nilai formulir yang dimasukkan pengguna secara otomatis di halaman lain kembali ke halaman itu. Aplikasi seperti itu akan seperti ini:

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

Inilah cara saya melakukannya.

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

Tidak ada solusi di atas yang menangani parar bersarang hanya dengan jQuery, jadi inilah solusi dua sen saya.

Jika Anda menggunakan jQuery dan Anda perlu menangani parameter bersarang yang dalam, Anda dapat menggunakan fungsi ini di bawah:

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

Berikut adalah contoh cara menggunakannya. Kode 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>

Dan jika Anda mengklik tombol tes, itu akan memposting formulir dan Anda akan mendapatkan nilai-nilai berikut di 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"
      }
    }
  }
}

Catatan: jika Anda ingin memposting formulir ke url lain dari halaman saat ini, Anda dapat menentukan url sebagai argumen kedua dari fungsi postForm.

Jadi misalnya (untuk menggunakan kembali contoh Anda):

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

Semoga ini membantu.

Note2: kode diambil dari plugin redirect . Saya pada dasarnya hanya menyederhanakannya untuk kebutuhan saya.

Plugin jQuery untuk redirect dengan POST atau GET:

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

Untuk menguji, masukkan file .js di atas atau salin / tempel kelas ke dalam kode Anda, lalu gunakan kode di sini, ganti "args" dengan nama variabel Anda, dan "nilai" dengan nilai-nilai dari masing-masing variabel:

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

Anda bisa membuat panggilan AJAX (kemungkinan menggunakan perpustakaan seperti menggunakan Prototype.js atau JQuery). AJAX dapat menangani opsi GET dan POST.