Método jQuery ajax - serializeArray()

Manual de Referência do jQuery Ajax

Exemplo

Exibe o resultado serializado dos valores do formulário em forma de array:

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

Experimente você mesmo

Definição e uso

O método .serializeArray() cria um array de objetos (nome e valor) através da serialização dos valores do formulário.

Você pode escolher um ou mais elementos de formulário (como input e/ou textarea), ou o próprio elemento form.

Sintaxe

$(seletor).serializeArray()

Descrição detalhada

O método .serializeArray() serializa elementos de formulário (semelhantes a método .serialize()retorna uma estrutura de dados JSON.

Atenção:Este método retorna um objeto JSON e não uma string JSON. É necessário usar um plug-in ou biblioteca de terceiros para a operação de stringificação.

O objeto JSON retornado é composto por um array de objetos, onde cada objeto contém uma ou duas pares de nome e valor - os parâmetros name e value (se o value não estiver vazio). Por exemplo:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // valor vazio
]

.serializeArray() usa as normas W3C sobre controles bem-sucedidospara detectar quais elementos devem ser incluídos. Especificamente, os elementos não podem estar desativados (os elementos desativados não serão incluídos) e devem ter uma propriedade name contida.

Este método permite operar com objetos de elementos de formulário selecionados individualmente, como <input>, <textarea> e <select>. No entanto, há uma maneira mais conveniente de, diretamente, escolher o próprio <form> para a operação de serialização. 

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

O código acima gera a seguinte estrutura de dados (supondo que o navegador suporte console.log):

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

Exemplo

Obtém o conteúdo do formulário e insere na página da web:

Código HTML：

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

Código jQuery：

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

Manual de Referência do jQuery Ajax