27Ene 2012 10 Comments */?>

Enviar formularios con AJAX y jQuery parte II

Categorías: JQuery, Tutoriales - Tags: , ,

Hace mucho tiempo escribí en el blog como enviar un formulario con AJAX y jQuery mediante el plugin jquery.form.js. A día de hoy y con mucha más experiencia en jQuery prefiero escribir mis propios códigos en lugar de utilizar tantos plugins.
Por lo que hoy les voy a explicar como enviar un formulario con AJAX gracias a jQuery y sin usar ningún plugin.

Para seguir el mismo ejemplo que en el otro post vamos a utilizar el mismo formulario:

<form id="myForm" action="contacto.php" method="post" style="height:200px;"> 
    <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>

Pero ahora para enviar el formulario tan solo haremos uso de algunas funciones de jQuery como son :

  • .serialize() : encargada de codificar todos los valores del formulario en una cadena para ser pasada.
  • .submit(): encargada de añadir al evento submit del formulario la función que usaremos para enviar el mismo.
  • jQuery.ajax(): encargada de realizar AJAX request.

Nuestro nuevo script quedaría de la siguiente manera:

        $(document).ready(function() { 
 
          $('#myForm').submit(function(){ //en el evento submit del fomulario
	          event.preventDefault();  //detenemos el comportamiento por default
 
			  var url = $(this).attr('action');  //la url del action del formulario
			  var datos = $(this).serialize(); // los datos del formulario
			  $.ajax({
				  type: 'POST',
				  url: url,
				  data: datos,
				  beforeSend: mostrarLoader, //funciones que definimos más abajo
				  success: mostrarRespuesta  //funciones que definimos más abajo
			   });
 
          });	
 
 
 
 
        });
 
 
        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"
        };

Pueden ver un ejemplo online en «Como enviar un formulario AJAX con jQuery»

Pueden descargar el código antiguo en este post

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus