jQuery ajax - serializeArray() metod

jQuery Ajax 参考手册

Exempel

Skriv ut resultatet av att serialisera formulärvärden i arrayform:

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

Prova själv

Definition och användning

serializeArray() metoden skapar ett objektarray genom att serialisera formulärvärden (namn och värde).

Du kan välja en eller flera formulärelement (t.ex. input och/eller textarea), eller form-elementet själv.

Syntax

$(selector).serializeArray()

Detaljerad förklaring

serializeArray() metoden serialiserar formulärelement (likt .serialize() metoden），återger JSON-datasstruktur.

Observera:Denna metod returnerar ett JSON-objekt och inte en JSON-sträng. Det krävs ett plugin eller en tredjepartsbibliotek för att konvertera till sträng.

Den returnerade JSON-objektet är en array av objekt, där varje objekt innehåller en eller två namn-värde par - name-parametern och value-parametern (om value inte är tom). Till exempel:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // Värdet är tomt
]

.serializeArray() metoden använder sig av W3C om Lyckade kontrollerFör att avgöra vilka element som bör inkluderas baserat på standarden för giltiga kontroller. Speciellt noteras att element inte får vara inaktiverade (inaktiverade element inkluderas inte), och elementen bör ha en namnattribut. Värdet för submit-knappen kommer inte att serialiseras. Data från filvalselement kommer inte att serialiseras.

Denna metod kan användas för att manipulera objekt som har valts enskilt i formulär, till exempel <input>, <textarea> och <select>. Men en mer bekväm metod är att direkt välja <form>-tagget själv för att utföra serialiseringen. 

$("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 参考手册