jQuery ajax - serializeArray() metode

jQuery Ajax 参考手册

Eksempel

Udskriv resultatet af at serialisere formulardata i arrayform:

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

Prøv det selv

Definition og brug

serializeArray() metoden opretter et objektarray (navn og værdi) ved at serialisere formulardata.

Du kan vælge en eller flere formularelementer (f.eks. input og/eller textarea), eller form-elementet selv.

Syntaks

$(selector).serializeArray()

Detaljeret forklaring

serializeArray() metoden serialiserer formularelementer (lignende .serialize() metoden），returnerer JSON-strukturdata.

Bemærk:Denne metode returnerer et JSON-objekt, ikke en JSON-streng. Det er nødvendigt at bruge en plugin eller tredjepartsbibliotek til at konvertere til streng.

Den returnerede JSON-objekt er en array af objekter, hvor hver objekt indeholder en eller to navne-værdipar - name parameter og value parameter (hvis value ikke er tom). For eksempel:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // værdien er tom
]

.serializeArray() metoden bruger W3C om succesfulde kontrolfor at bestemme, hvilke elementer der skal inkluderes. Bemærk, at elementer ikke kan være deaktiverede (deaktiverede elementer inkluderes ikke), og elementerne skal have et navneattribut. Værdierne for submit-knapperne vil ikke blive serialiseret. Data fra filvælgere vil heller ikke blive serialiseret.

Denne metode kan operere med objekter, der har valgt separate formularelementer, såsom <input>, <textarea> og <select>. Dog er en mere bekvem metode at vælge <form>-etiketten selv for at udføre serialisering. 

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

上面的代码产生下面的数据结构（假设浏览器支持 console.log）：

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

示例

取得表单内容并插入到网页中：

HTML 代码：

<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 代码：

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

jQuery Ajax 参考手册