Pertanyaan Permintaan posting JavaScript seperti pengiriman formulir


Saya mencoba mengarahkan browser ke halaman lain. Jika saya menginginkan permintaan GET, saya mungkin berkata

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

Tetapi sumber daya yang saya coba akses tidak akan merespon dengan benar kecuali 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 mengirimkan formulir dari DOM.

Tapi saya benar-benar ingin kode JavaScript yang memungkinkan saya untuk mengatakannya

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

Apa implementasi browser lintas terbaik?

Edit 

Maaf saya tidak jelas. Saya memerlukan solusi yang mengubah lokasi browser, seperti mengirimkan formulir. Jika ini memungkinkan dengan XMLHttpRequest, itu tidak jelas. Dan ini seharusnya tidak asynchronous, atau menggunakan XML, jadi Ajax bukanlah jawabannya.


1277
2017-09-25 15:15


asal


Jawaban:


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

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            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();
}

Contoh:

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

EDIT: Karena ini telah mendapat banyak sekali, saya kira orang-orang akan menyalin-paste ini banyak. Jadi saya menambahkan hasOwnProperty periksa untuk memperbaiki bug yang tidak disengaja.


1841
2017-09-25 15:28



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

109
2018-04-04 00:21



Implementasi cepat dan jernih dari jawaban @Aaron:

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

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


62
2017-09-25 15:33



Menggunakan createElement fungsi yang disediakan di jawaban ini, yang diperlukan karena Kerusakan IE dengan atribut nama pada elemen yang dibuat biasanya 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);
}

51
2017-09-25 15:29



Jawaban Rakesh Pai luar biasa, tetapi ada masalah yang terjadi untuk saya (dalam Safari) ketika saya mencoba memposting 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!

34
2017-07-15 20:50



Tidak, Anda tidak dapat memiliki permintaan posting JavaScript seperti pengiriman formulir.

Apa yang bisa Anda miliki adalah formulir dalam HTML, lalu kirimkan dengan JavaScript. (Seperti yang dijelaskan berkali-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 bentuk 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();
}

Kemudian, 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 bentuk-bentuk itu harus diatasi dengan nama tetapi itu tidak penting sekarang.


27
2017-08-19 01:00



Jika Anda memiliki Prototipe terinstal, Anda dapat memperketat kode untuk menghasilkan 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();

24
2018-01-23 23:53



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

18
2018-03-22 01:41