jQuery ajax - serializeArray() -menetelmä

jQuery Ajax viittausoppaasti

Esimerkki

Tulosta seriaaloidut lomakkeen arvot taulukkomuodossa:

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

Kokeile itse

Määritelmä ja käyttötapa

serializeArray() -menetelmä luo objektiarrayn seriaaloimalla lomakkeen arvot (nimi ja arvo).

Voit valita yhden tai useita lomakkeen elementtejä (esim. input ja/tai textarea) tai itse lomakkeen elementin.

Syntaksi

$(valitsin).serializeArray()

Yksityiskohtainen selitys

serializeArray() -menetelmä seriaaloi lomakkeen elementit (esim. .serialize() -menetelmä），palauttaa JSON-rakenteen.

Huomaa:Tämä menetelmä palauttaa JSON-objektin eikä JSON-merkkijonoa. Tarvitaan lisäosaa tai kolmannen osapuolen kirjastoa merkkijonon muuntamiseen.

Palautettu JSON-objekti koostuu objektiarraysta, jossa jokainen objekti sisältää yhden tai kaksi nimiparia - name- ja value-parametrit (jos value ei ole tyhjä). Esimerkiksi:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // Arvo on tyhjä
]

.serializeArray() -menetelmä käyttää W3C:n onnistuneet kontrollit（kykyiset kontrollit） standardin mukaan tarkistaa, mitkä elementit tulisi sisällyttää. Erityisesti mainitaan, että elementti ei voi olla poissa käytöstä (poissa käytöstä olevat elementit eivät sisällytetä), ja elementillä tulisi olla name-ominaisuus. Lähettämispainikkeen arvoa ei seriaaloida. Tiedostovalitsimen dataa ei myöskään seriaaloida.

Tämä metodi voi käsitellä valittuja yksittäisiä lomakkeen elementtejä, kuten <input>, <textarea> ja <select>. Kuitenkin, helpompi tapa on valita suoraan <form>-tagi itsessään suorittaaksesi seriaalointi-toiminnon. 

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

Yllä oleva koodi luo seuraavan tietorakenteen (oletetaan, että selain tukee console.log):

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

Esimerkki

Hanki lomakkeen sisältö ja lisää se verkkosivulle:

HTML koodi:

<p id="results"><b>Results:</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>

jQuery koodi:

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

jQuery Ajax viittausoppaasti