Enviar formulario usando AJAX y jQuery

Question

Parece que esto debería ser algo incorporado a jQuery sin la necesidad de más que unas pocas líneas de código, pero no puedo encontrar la solución "simple". Por ejemplo, tengo un formulario HTML:

<form method="get" action="page.html"> 
    <input type="hidden" name="field1" value="value1" /> 
    <input type="hidden" name="field2" value="value2" /> 
    <select name="status"> 
     <option value=""></option> 
     <option value="good">Good</option> 
     <option value="bad">Bad</option> 
    </select> 
</form> 

Cuando alguien cambia el campo de selección, me gustaría enviar el formulario utilizando Ajax para actualizar la base de datos. Pensé que habría alguna manera de hacer lo siguiente sin crear manualmente los valores/atributos, sólo les envía todo, como:

$("select").change(function(){ 
    $.get("page.html?" + serializeForm()); 
}); 

¿Qué me falta?

Answer 1

Esto es lo que terminó funcionando.

$("select").change(function(){ 
    $.get("/page.html?" + $(this).parent("form").find(":input").serialize()); 
}); 

Answer 2

Hay un bonito form plugin que le permite enviar un formulario HTML de forma asincrónica.

$(document).ready(function() { 
    $('#myForm1').ajaxForm(); 
}); 

o

$("select").change(function(){ 
    $('#myForm1').ajaxSubmit(); 
}); 

para enviar el formulario de inmediato

Answer 3

En primer lugar dar a su forma un atributo id, a continuación, utilizar un código como éste:

$(document).ready(function() { 
    var form = $('#my_awesome_form'); 

    form.find('select:first').change(function() { 
    $.ajax({ 
     type: "POST", 
     url: form.attr('action'), 
     data: form.serialize(), 
     success: function(response) { 
     console.log(response); 
     } 
    }); 
    }); 

}); 

lo que este código utiliza .serialize() para extraer los datos relevantes del formulario. También asume que la selección que le importa es la primera en el formulario.

Para referencia futura, los jQuery docs son muy, muy buenos.