Cómo hacer un tratamiento de formularios en jQuery para enviar al servidor los datos por Ajax y recibir la respuesta sin recargar la página.
Estamos demostrando los métodos de formación que implementan los cursos que impartimos en EscuelaIT, la plataforma de e-learning de DesarrolloWeb.com. Donde ofrecemos siempre clases en directo con el profesor y los alumnos en contacto estrecho, lo que ofrece las mejores condiciones de la formación presencial, conjugadas con las facilidades de la formación online.
Para ello hemos ofrecido dos clases gratuitas del curso de jQuery. La primera ya la divulgamos dentro de DesarrolloWeb.com y se puede encontrar en Primera clase experimental del curso de jQuery. Aquella clase era más bien introductoria y esta otra es una clase más avanzada del curso de jQuery que trata sobre formularios y Ajax.
Escogí este tema porque opino que es un contenido original, que no habíamos tratado antes en DesarrolloWeb.com y que demuestra bien qué tipo de contenido de utilidad vamos impartir a través de este fantástico curso. Quizás para las personas que estén comenzando con jQuery sea un poco avanzada, pero lo importante es que se pueda comprobar que hay muchas cosas interesantes que conocer y que nuestro modelo de formación facilita mucho el proceso de aprendizaje.
Tener en cuenta que este material se trataría en una clase de mitad del curso en adelante. Las clases del curso tienen otro contenido y duración, ya que por las características de estas clases experimentales es imposible reproducir el contenido que se va a dar un una de las clases del curso, y es que hay muchos conocimientos de base que se supone que llegado a este momento del curso los estudiantes habrán asimilado ya. Yo trato de explicar todas esas cosas básicas, para que nadie se pierda y pueda aprovechar el contenido divulgado en esta clase, pero que durante la marcha del curso no sería necesario reforzar, pues ya fue comunicado y practicado en las clases anteriores.
Contenido de esta segunda clase: formularios y Ajax
El objetivo de esta segunda clase es hablaros sobre Ajax en formularios, es decir, cómo enviar un formulario por Ajax y mostrar la respuesta que nos llegue del servidor sin tener que recargar la página en el navegador. Es un tema que jQuery hace de manera muy sencilla, lo que nos facilita enormemente nuestros procesos de desarrollo. Tanto es así que, si nos limitásemos a enviar por Ajax un formulario, esta clase podría haber durado 15 minutos. Sin embiargo, explicaremos muchas otras cosas interesantes.
Ejercicio 1: formularios en jQuery:
Comenzamos mostrando cómo detectar el momento en el que se envía un formulario y detener ese proceso de envío automático que hace el navegador, para enviarlo por nuestros propio script jQuery.
Luego mostraremos cómo acceder a los campos de un formulario a través de jQuery. Un proceso que no tiene mucho que ver con Ajax, pero que nos vendrá bien para conocer algo más de la potencia del framework y de los selectores disponibles en jQuery para acceder a elementos de la página.
El ejemplo desarrollado en esta primera etapa de la clase se puede ver a continuación.
<!DOCTYPE html>
<html>
<head>
<title>form</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).on("ready", function(){
$("#f1").on("submit",function(evento){
evento.preventDefault();
//alert($(this).children("input:first").val());
$(this).children(":input").each(function(indice, campo){
console.log(indice,campo);
alert("el elemento " + indice + " tiene el valor " + $(campo).val());
});
});
});
</script>
</head>
<body>
<form action="enviar.php" id="f1">
Nombre: <input type="text" name="nombre" />
<br>
Edad: <input type="text" name="edad">
<br>
Sexo: <select name="sexo">
<option value="H">Hombre</option>
<option value="M">Mujer</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>Ejercicio 2: enviar el formulario por Ajax
En el segundo bloque de esta clase realizamos ya el envío de un formulario por Ajax y explicamos algunas de las características y posibilidades que se deben conocer en el trabajo con Ajax en jQuery. Además hacemos un par de pruebas con una página PHP que recibiría los datos de un formulario.
Es importante mencionar en este punto también que durante el curso se verán por supuesto muchas otras cosas que tienen que ver con los formularios en Ajax y el trabajo con diversas funciones de nivel más alto y más bajo para hacer Ajax.
El código desarrollado en este punto es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).on("ready", function(){
$("#f1").on("submit",function(evento){
evento.preventDefault();
var form = $(this);
$.post(form.attr("action"), form.serialize(), function(datos){
//codigo a ej resp. ajax
$("#resultado").html(datos);
});
});
});
</script>
</head>
<body>
<div id="resultado"></div>
<form action="enviar.php" id="f1">
Nombre: <input type="text" name="nombre">
<br>
Edad: <input type="text" name="edad">
<br>
Intereses <textarea name="intereses"></textarea>
<br>
Sexo:
<select name="sexo">
<option value="H">Hombre</option>
<option value="M">Mujer</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>Como se puede ver, lo que es el envío por Ajax es casi inmediato en jQuery, pero hay que reconocer que todavía muchas mejoras se pueden hacer en este ejemplo, que por supuesto veremos con detalle durante el curso.
Vídeo de la segunda clase sobre formularios y Ajax
Aquí tienes el vídeo de esta clase, que esperamos te guste y resulte de interés para aprender las bases de Ajax con jQuery.
Conclusión
Espero que os hayan interesado estas dos clases experimentales del curso de jQuery, que hayan resultado de utilidad y hayan ilustrado convenientemente el modelo de formación en el que creemos.Ojalá os pueda ver durante el curso y ofreceros una formación diferenciada. Van a ser 6 semanas que, con certeza, van a transformar la manera de entender y trabajar con jQuery. Son clases de 1.5 horas, lo ideal para no saturar el cerebro con demasiada información cada día, lo que hace que el proceso de aprendizaje sea mucho más productivo y ameno. Vamos a practicar también mucho, de manera que los estudiantes puedan de verdad asimilar cada día el contenido. Porque no sirve de nada escuchar a un profesor si no se acompaña todo eso por la práctica.
Así que agradecemos a las personas que ya han confiado en nosotros para la formación y a los demás, os animamos a conocernos en este curso que no cabe duda os encantará.
Accede al Curso de jQuery para más información.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...