jQuery ajax - metoda serializeArray()

Podręcznik referencyjny jQuery Ajax

Przykład

Wypisz wynik serializacji wartości formularza w formie tablicy:

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

Spróbuj sam

Definicja i użycie

serializeArray() metoda tworzy tablicę obiektów poprzez serializację wartości formularza (nazwa i wartość).

Możesz wybrać jeden lub kilka elementów formularza (np. input oraz/ lub textarea), lub sam element formularza.

Gramatyka

$(selektor).serializeArray()

Szczegółowe wyjaśnienie

serializeArray() metoda serializuje elementy formularza (podobne .serialize() metodazwraca strukturę danych JSON.

Uwaga:Ta metoda zwraca obiekt JSON, a nie ciąg znaków JSON. Konieczne jest użycie wtyczki lub zewnętrznej biblioteki do operacji konwersji na ciąg znaków.

Zwracany obiekt JSON składa się z tablicy obiektów, gdzie każdy obiekt zawiera jeden lub dwa pary nazwa-wartość - parametr name i parametr value (jeśli wartość nie jest pusta). Przykład:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // wartość pusta
]

.serializeArray() metoda używa standardu W3C o udane kontrolkistandardu (ważne kontrolki) do wykrywania, które elementy powinny być włączone. Szczególne wyjaśnienie, elementy nie mogą być wyłączone (wyłączone elementy nie będą włączone), a elementy powinny mieć atrybut name.

Ta metoda pozwala na operowanie na obiektach formularza, które zostały wybrane osobno, takie jak <input>, <textarea> i <select>. Jednakże, łatwiejszym sposobem jest bezpośrednie wybranie samego znacznika <form> do wykonania operacji serializacji. 

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

Powyższy kod generuje poniższą strukturę danych (załóżmy, że przeglądarka obsługuje console.log):

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

Przykład

Pobierz zawartość formularza i wstaw ją do strony internetowej:

Kod HTML:

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

Kod jQuery:

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

Podręcznik referencyjny jQuery Ajax