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

  • Pingback: Como enviar un formulario via AJAX con JQuery()

  • Eswing

    Muy buen tutorial, pero me da un gran problema:
    -El contenido de la variable "responseText" es toda la página, además se carga posteriormente debajo.
    Muchas Gracias

    • jonathan

      Hola Eswing ese error lo solucionas asi:
      $('#myForm').submit(function(miEvento){
      miEvent.preventDefault();

      Es decir agrega un nombre de evento a la funcion 'function' para q reciba dicho evento y llama a 'preventDefault()'.

      Dar gracias no esta de mas XD

  • Rober Dote

    Hola,
    Gracias por el tutorial 🙂

    Tengo una duda,
    He estado probando con un php en mi servidor, pero se queda cargando por siempre xD

    Alguna ayudita?

    Un abrazo!

  • QuitoX

    Hola, soy nuevo en esto, como 2 Meses y es la primera explicacion clara que he encontrado. Muchas Gracias man.

    Eswing: Tenes que borrar la ultima linea de la funcion "mostrarRespuesta" para que no aparesca abajo.

    Saludos Atte.

  • Frkalderon

    Hola que tal, muy buen tutorial, se agradece mucho, he utilizado el código anterior a este post en uno de mis proyectos personales y me ha ido muy bien con él mientras tenga un solo formulario en la página o que sólo necesite interactuar con uno en especial en la página, mi problema se ha suscitado cuando intento llamar a la función pero quisiera pasarle como parámetro el id del formulario al que deseo aplicarle $(‘#myForm’).submit(function()… quisiera poder pasarle como parámetro el id que se genera dinámicamente en mi sitio en vez de #myForm, he intentado de varias formas pero no he dado con la respuesta, alguna ayuda?

    Espero haberme dado a entender.de antemano gracias y saludos.

  • josfina

    como cahco los datos en contacto.php si envio varios?

  • Admin

    hola, muy buen tutorial, pero como evitar el compoartmiento de FIREFOX de seguir la URL ya que este abre una nueva URL al enviar el mensaje ?

    gracias

  • Genesis Vargas Jimenez

    noooooooooooooooooooooooooooo funciona en firefox…. dure como 3 horas buscando el problema y se me ocurrio probarlo con opera y ZAAZZZ! funciono ensguida….
    quien me ayuda????

  • Faustino Olan

    Hola muchas gracias, una pregunta seria lo mismo si tienes una caja de texto y un file para enviar un archivo?