Lulus seluruh formulir sebagai data dalam fungsi jQuery Ajax

Saya memiliki fungsi jQuery ajax dan ingin mengirimkan seluruh formulir sebagai data posting. Kami terus memperbarui formulir sehingga membosankan untuk terus-menerus memperbarui input formulir yang harus dikirim dalam permintaan.

Ada fungsi yang melakukan ini:

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);

serialize () bukan ide yang baik jika Anda ingin mengirim formulir dengan metode posting. Sebagai contoh jika Anda ingin mengirimkan file melalui ajax, itu tidak akan berfungsi.

Misalkan kita memiliki formulir dengan id ini: "myform".

solusi yang lebih baik adalah membuat FormData dan mengirimkannya:

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

Secara umum digunakan serialize()pada elemen form.

Harap perhatikan bahwa beberapa opsi <seleksi> diserialisasi dengan kunci yang sama, mis

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

akan menghasilkan string kueri yang mencakup banyak kejadian dari parameter kueri yang sama:

[path]?foo=1&foo=2&foo=3&someotherparams...

yang mungkin bukan yang Anda inginkan di backend.

Saya menggunakan kode JS ini untuk mengurangi beberapa parameter menjadi kunci tunggal yang dipisah koma (tanpa malu disalin dari respons komentator di utas di tempat John Resig):

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

yang mengubah hal di atas menjadi:

[path]?foo=1,2,3&someotherparams...

Dalam kode JS Anda, Anda akan menyebutnya seperti ini:

var inputs = compress($("#your-form").serialize());

Semoga itu bisa membantu.

Menggunakan

cerita bersambung ()

var str = $("form").serialize();

Serialkan formulir ke string kueri, yang bisa dikirim ke server dalam permintaan Ajax.

Opsi jQuery yang bagus untuk melakukan ini adalah melalui FormData . Metode ini juga cocok saat mengirim file melalui formulir!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

Fungsi kirim Anda di jQuery akan terlihat seperti ini:

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

untuk menambahkan data ke formulir Anda, Anda bisa menggunakan input tersembunyi di formulir Anda, atau Anda menambahkannya dengan cepat:

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

Anda hanya perlu memposting data. dan Menggunakan parameter fungsi set jquery ajax. Berikut ini sebuah contoh.

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

Solusi lain tidak berhasil untuk saya. Mungkin DOCTYPE lama dalam proyek yang saya kerjakan mencegah opsi HTML5.

Solusi saya:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}