Permintaan posting JavaScript seperti formulir kirim


1531

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.


1
Seperti disebutkan di utas lain ada plugin jquery ".redirect" yang berfungsi dengan metode POST atau GET. Itu membuat formulir dengan input tersembunyi dan mengirimkannya untuk Anda. Mis: $ .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
OG Sean

Jawaban:


2145

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.


10
Bagaimana dengan array dalam params data? Jquery post () mengartikan mis: "data: {array: [1, 2, 3]}" as? Array = 1 & array = 2 & array = 3. Kode ini memberikan hasil lain.
Lempar

18
Peringatan: Meskipun banyak upvote, solusi ini terbatas dan tidak menangani array atau objek bersarang di dalam formulir. Kalau tidak, itu jawaban yang bagus.
emragins

3
luar biasa ini tidak didukung baik oleh html atau javascript bukan jquery .. Anda harus kode ini.
eugene

14
@mricci Maksud cuplikan ini adalah untuk mengarahkan ulang browser ke URL baru yang ditentukan oleh tindakan; jika Anda tetap pada halaman yang sama, Anda bisa menggunakan AJAX tradisional untuk mengirim data Anda. Karena browser harus menavigasi ke halaman baru, konten DOM halaman saat ini tidak masalah
Ken Bellows

6
Python, Django, dan mungkin pengguna Flask akan melihat kesalahan ini: "Terlarang (403). Verifikasi CSRF gagal. Permintaan dibatalkan.", Jika membuat formulir dari nol. Dalam hal ini, Anda harus memberikan token csrf dengan cara ini: post ('/ contact /', {name: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()});
Davidson Lima

129

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

2
Tetap: sekarang menambahkan ke document.body
Ryan Delucchi

7
Sedikit dimodifikasi untuk mendukung array dan objek gist.github.com/hom3chuk/692bf12fe7dac2486212
НЛО

3
Jika nilai berisi karakter dangeours xml, ini tidak akan berfungsi di ASP.NET encodeUriComponent (nilai) diperlukan. Kemudian, UrlDecode juga diperlukan di sisi server.
Stefan Steiger

Jika kebutuhan Anda sederhana, maka fungsi ini tidak perlu. Satu $("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
garis

71

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


6
Apakah ada cara untuk melakukan ini tanpa ada halaman web yang dimuat di jendela / tab browser saat ini?
pbreitenbach

54

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

6
Apakah Anda perlu menghapus anak setelah pengiriman? Bukankah halaman itu hilang begitu saja?
Nils

2
Tidak ada gunanya untuk menghapus anak setelah pengiriman, kecuali jika sesi digunakan dan data tersebut disimpan.
Milo

6
@CantucciHQ Halaman mungkin tetap tidak berubah bahkan jika target bentuk tidak ditetapkan. Ada 204 Tidak Ada Konten , misalnya.
Eugene Ryabtsev

38

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!

7
2018 dan masih bukan jawaban yang lebih baik?
iiirxs

30

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.


26

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

25

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

3
ps saya sekarang menikmati menggunakan fungsi itu tetapi alih-alih mengirimkan formulir pada akhirnya saya hanya mengembalikannya ke pemanggil. cara ini saya dapat dengan mudah mengatur atribut tambahan atau melakukan hal-hal lain dengannya jika diperlukan.
kritzikratzi

3
Bagus! sangat berguna. Perubahan kecil untuk orang-orang yang mengandalkan PHP di sisi server dari formulir ini, saya mengubah addField (kunci, params [kunci] [i]) menjadi addField (kunci + '[]', params [kunci] [i]). Ini membuat $ _POST [kunci] tersedia sebagai array.
Thava

2
@Thava Anda juga bisa mengatur nama = "bla []" pada bidang input Anda. lagipula, ada bahasa selain php yang tidak mendukung sintaks [] jadi saya membiarkan ini tidak berubah.
kritzikratzi

17

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

16

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

1
Ini sepertinya juga tidak mengkodekan objek bersarang dengan benar.
buka

1
@pen kamu punya biola?
emragins

1
Tidak, maaf Cukup mudah untuk menulis sendiri; tidak sepadan dengan waktu untuk debug.
buka

12

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.


5
XMLHTTPRequest tidak memperbarui jendela. Apakah Anda mencoba mengatakan saya harus mengakhiri dengan AJAX dengan document.write (http.responseText)?
Joseph Holsten

11
Mengapa seseorang harus menambahkan 30k + ke proyeknya jika dia dapat melakukan hal lain dengan framework?
Demensik

12

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

1
ReferenceError Uncaught: QueryString tidak didefinisikan.
Chase Roberts

11

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.


5
Anda tidak menyebutkan bahwa pendekatan yang Anda tawarkan didasarkan pada pustaka JavaScript jQuery .
DavidRR

8
Anda juga melewatkan inti pertanyaan - dia ingin 'mengarahkan browser ke halaman lain', bukan membuat permintaan ajax.
Hitam

Anda bisa menunggu balasan dan kemudian document.location = {url}; Satu-satunya tempat yang saya bayangkan ini tidak akan berfungsi adalah jika Anda mengarahkan ulang ke unduhan file.
Epirocks

11

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

1
Bekerja untukku. Terima kasih. (Diuji dalam Chrome)
dannie.f

2
Saya pikir masalahnya di sini adalah bahwa formulir dihapus sebelum pengiriman kembali. Saya pernah mendengar bahwa di beberapa browser jika Anda memindahkan atau menghapus formulir sebelum pengiriman selesai, penangannya tidak akan menyala. Sebagai gantinya, hapus formulir dari dokumen di pawang.
Jeff DQ

Bekerja seperti pesona. Diuji pada Firefox + Chrome + IE11 - Terima kasih banyak untuk ini!
Deunz

6

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

1
Solusi ini adalah satu dari sedikit yang tidak menggantikan dokumen yang sedang ditampilkan dengan kembalinya jawaban server.
dothebart

4

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.


3

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

3

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


1

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

1

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

1

Anda dapat menambahkan formulir secara dinamis menggunakan DHTML lalu mengirim.



1

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>

1

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

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

itu akan dikirimkan di browser.


0

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

0

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

0

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.


-1

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

Ini juga disebutkan di sini: stackoverflow.com/questions/8389646/…
OG Sean

Solusi ini masih berjalan baik bagi kami, jika Anda memilihnya, silakan tinggalkan komentar mengapa.
OG Sean

-2

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


5
Menggunakan XMLHttpRequest tidak akan mengarahkan browser ke halaman lain.
Jonny Buchanan
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.