Como enviar un formulario via AJAX con JQuery
Posted on July 5, 2009 by Damian4 Comments
Hoy en dia y gracias a JQuery cualquiera puede implementar AJAX en sus webs para hacerlas más dinámicas. Hoy debido a todo el tema de la fiebre porcina cierran los boliches así que ya que me quedo en casa aprovecho y les cuento como poder usar el plugin jquery.forms para enviar un formulario mediante AJAX de una forma super sencilla.
Para empezar necesitamos un formulario. Vamos a usar de ejemplo un formulario de contácto sencillo:
<label>Nombre:</label> <input type="text" name="name" />
<label>Mensaje:</label> <textarea name="mensaje"></textarea>
<input type="submit" value="Enviar" /> <div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/></div>
</form>
Una vez tengamos el codigo HTML del formulario tan solo debemos añadir el plugin y ejecutarlo una vez el DOM este cargado añadiendo las opciones que creamos convenientes.
Hay diferentes gif animados para ajax, si quieren alguno diferente echen un vistazo al último artículo que escribí.
Para consultar las diferente opciones de jquery.form visiten su web.
index.php:
<script src="js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
// esperamos que el DOM cargue
$(document).ready(function() {
// definimos las opciones del plugin AJAX FORM
var opciones= {
beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
};
//asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
$('#myForm').ajaxForm(opciones) ;
//lugar donde defino las funciones que utilizo dentro de "opciones"
function mostrarLoader(){
$(#loader_gif).fadeIn("slow"); //muestro el loader de ajax
};
function mostrarRespuesta (responseText){
alert("Mensaje enviado: "+responseText); //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text
$("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
$("#ajax_loader").append("<br>Mensaje: "+responseText); // Aca utilizo la función append de JQuery para añadir el responseText dentro del div "ajax_loader"
};
});
</script>
Este ejemplo es muy simple. El action del formulario apunta a contacto.php y es ahi donde hay que poner las funciones que queramos, como por ejemplo que nos envie un mail con el mensaje y nombre que aparece en el formulario. Si no estuvieramos usando JQuery y el plugin de jquery.form, al hacer click en “Enviar” nuestro navegador cargaria la página contacto.php como suele pasar normalmente. En este caso gracias al AJAX el contenido del formulario se enviara mediante la variable $_POST a la página contacto.php de una forma invisible al usuario y una vez que se envie correctamente se va a ejecutar este simple código:
contacto.php:
if($_POST['mensaje'] != ''){
echo $_POST['mensaje'];
}
?>
Lo que hacemos aca es un echo del mensaje enviado que aunque para el usuario pasa inadvertido , podremos mostrarlo con “responseText”.
Si quieren ver un ejemplo de un formulario de contacto con AJAX, pueden probar este.
Espero que haya servido de ayuda. Un saludo a todos!!!
Tags: ajax, JQuery, jquery.plugin
Filed Under: JQuery, Tutoriales
Con tu lector preferido.
Via Email.
Por Twitter.