Método jQuery ajax - serializeArray()

Manual de referencia de jQuery Ajax

Ejemplo

Ejemplo de salida de valores de formulario serializados en forma de array:

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

Pruebe usted mismo

Definición y uso

El método .serializeArray() crea un array de objetos mediante la serialización de valores de formulario (nombres y valores).

Puede seleccionar un o varios elementos de formulario (como input y/o textarea), o el elemento form propio.

Sintaxis

$(selector).serializeArray()

Descripción detallada

El método .serializeArray() serializa elementos de formulario (similares a método .serialize()devuelve una estructura de datos de datos JSON.

Nota:Este método devuelve un objeto JSON en lugar de una cadena JSON. Es necesario usar un plugin o una biblioteca de terceros para la operación de stringificación.

El objeto JSON devuelto está compuesto por un array de objetos, donde cada objeto contiene uno o dos pares de nombre y valor - parámetros name y value (si value no está vacío). Por ejemplo:

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

.serializeArray() utiliza los estándares de W3C sobre controles exitosospara detectar qué elementos deben incluirse. Específicamente, los elementos no pueden estar deshabilitados (los elementos deshabilitados no se incluirán) y deben tener una propiedad name.

Este método permite operar con objetos de elementos de formulario seleccionados individualmente, como <input>, <textarea> y <select>. Sin embargo, un método más conveniente es seleccionar directamente la etiqueta <form> propia para realizar la operación de serialización. 

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

El código anterior produce la siguiente estructura de datos (asumiendo que el navegador admite console.log):

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

Ejemplo

Obtener el contenido del formulario e insertarlo en la página 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 de jQuery：

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

Manual de referencia de jQuery Ajax