jQuery ajax - method .serializeArray()

Panduan Referensi jQuery Ajax

Contoh

Output hasil serialisasi nilai formulir dalam bentuk array:

$("button").click(function(){
  x=$("form").serializeArray();
  $.each(x, function(i, field){
    $("#results").append(field.name + ":" + field.value + " ");
  );
);

Coba sendiri

Definisi dan penggunaan

Method .serializeArray() membuat array objek melalui serialisasi nilai formulir (nama dan nilai).

Anda dapat memilih satu atau beberapa elemen formulir (seperti input dan/atau textarea), atau form sendiri.

Syntax

$(selector).serializeArray()

Keterangan detil

method .serializeArray() menserialisasi elemen formulir (seperti method .serialize()kembali ke struktur data JSON.

Perhatian:Metode ini mengembalikan objek JSON bukan string JSON. Perlu menggunakan plugin atau library pihak ketiga untuk operasi stringifikasi.

Objek JSON yang dihasilkan berupa array objek, di mana setiap objek berisi satu atau dua pasangan nama nilai - parameter name dan value (jika value tidak kosong). Sebagai contoh:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // nilai kosong
]

.serializeArray() method menggunakan standar W3C tentang controls yang suksesberdasarkan standar kontrol yang berlaku untuk mengecek elemen mana yang harus disertakan. Keterangan khusus, elemen tidak boleh dinonaktifkan (elemen yang dinonaktifkan tidak akan disertakan), dan elemen harus memiliki atribut name. Nilai tombol submit juga tidak akan diserialisasi. Data elemen pilihan berkas juga tidak akan diserialisasi.

Metode ini dapat beroperasi terhadap objek elemen formulir yang dipilih secara terpisah, seperti <input>, <textarea>, dan <select>. Namun, metode yang lebih mudah adalah, langsung memilih tag <form> sendiri untuk operasi serialisasi. 

$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
);

Kode di atas menghasilkan struktur data di bawah ini (dengan asumsi browser mendukung console.log):

[
  {
    name: a
    value: 1
  },
  {
    name: b
    value: 2
  },
  {
    name: c
    value: 3
  },
  {
    name: d
    value: 4
  },
  {
    name: e
    value: 5
  }
]

Contoh

Ambil konten formulir dan masukkan ke halaman web:

Kode HTML：

<p id="results"><b>Hasil:</b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

Kode jQuery：

var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
);

Panduan Referensi jQuery Ajax