jQuery ajax - serializeArray() methode

jQuery Ajax 参考手册

Voorbeeld

Geef het resultaat van de serialisatie van formulierwaarden in arrayvorm weer:

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

Probeer het zelf

Definitie en gebruik

De serializeArray() methode maakt gebruik van de serialisatie van formulierwaarden om een objectarray (naam en waarde) te creëren.

U kunt een of meerdere formulierelementen (zoals input en/of textarea) of het formulier zelf kiezen.

Syntax

$(selector).serializeArray()

Uitleg

serializeArray() methode serialiseert formulierelementen (soortgelijk .serialize() methode），teruggegeven JSON-gegevensstructuur.

Opmerking:Deze methode retourneert een JSON-object en niet een JSON-string. U moet een plug-in of een derde partijbibliotheek gebruiken voor de stringificatie.

De teruggegeven JSON-object is een objectarray samengesteld, waarin elk object een of twee naam-waardeparen bevat - de naamparameter en de waardeparameter (indien de waarde niet leeg is). Voorbeeld:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // Waarde is leeg
]

.serializeArray() methode gebruikt de W3C-richtlijnen voor succesvolle stuurprogramma'sop basis van de standaard van (geldige stuurprogramma's) om te detecteren welke elementen moeten worden opgenomen. Specifieke opmerking: elementen mogen niet worden gedeactiveerd (gedeactiveerde elementen worden niet opgenomen) en elementen moeten een naam-eigenschap bevatten. De waarde van de submit-knop wordt niet gesequentieerd. De gegevens van het bestandselectie-element worden ook niet gesequentieerd.

Deze methode kan worden gebruikt om te werken met objecten die specifieke formulierelementen selecteren, zoals <input>, <textarea> en <select>. Maar een handiger manier is om direct het <form>-tag zelf te selecteren voor de serialisatiefunctie. 

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