jQuery ajax - metodo serializeArray()

Manuale di riferimento per jQuery Ajax

Esempio

Output il risultato serializzato dei valori del modulo in forma di array:

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

Prova a fare tu stesso

Definizione e uso

serializeArray() metodo crea un array di oggetti (nome e valore) serializzando i valori del modulo.

Puoi selezionare un elemento di modulo o più elementi di modulo (ad esempio input e/ou textarea), o il modulo stesso.

Sintassi

$(selettore).serializeArray()

Descrizione dettagliata

serializeArray() metodo serializza elementi di modulo (simili a .serialize() metodo)), restituisce una struttura dati JSON.

Attenzione:Questo metodo restituisce un JSON oggetto, non una stringa JSON. È necessario utilizzare plugin o librerie di terze parti per l'operazione di stringificazione.

Il JSON oggetto restituito è un array di oggetti, ciascuno dei quali contiene uno o due coppie di nome e valore - il parametro name e il parametro value (se value non è vuoto). Per esempio:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // Valore vuoto
]

.serializeArray() utilizza lo standard W3C su controlli validiin base allo standard dei controlli validi per determinare quali elementi devono essere inclusi. In particolare, gli elementi non devono essere disabilitati (gli elementi disabilitati non vengono inclusi), e gli elementi devono avere un attributo name contenente.

Questa funzione può operare sugli oggetti di elementi di modulo selezionati singolarmente, come <input>, <textarea> e <select>. Tuttavia, un metodo più conveniente è quello di selezionare direttamente il tag <form> stesso per eseguire l'operazione di serializzazione. 

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

Il codice sopra genera la seguente struttura di dati (supponendo che il browser supporti console.log):

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

Esempio

Ottenere il contenuto del modulo e inserirlo nella pagina web:

Codice HTML:

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

Codice jQuery:

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

Manuale di riferimento per jQuery Ajax