Para ello hemos ofrecido dos clases gratuitas del curso de jQuery que comienza este próximo miércoles. 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.
Si quieres saber más sobre este curso te recomiendo que entres en la página del programa y mecánica del curso de jQuery.
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.
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.
Compartir en redes sociales
Usuarios: 
09 de septiembre de 2012
Valoración del artículo:
