Cómo enviar un formulario con Ajax y mostrar los resultados en la propia página sin recargarla, con Mootools.
En nuestro Manual de Mootools hemos aprendido las cosas más básicas para empezar a trabajar con este framework Javascript y hacer cómodamente algunas cosas que sin él sería mucho más difícil. Una de las facilidades que podemos utilizar de Mootools es la realización de scripts Ajax, sin tener que complicarnos con las particularidades de los distintos navegadores. En este artículo de DesarrolloWeb.com queremos mostrar la facilidad con la que podemos enviar un formulario con Ajax usando Mootools.
Por ahora vamos a intentar presentar un formulario muy sencillo y cómo podemos enviarlo con Ajax utilizando el menor número de líneas de código posibles. Luego complicaremos el ejemplo, para añadir efectos y otras cosas interesantes, pero lo vamos a dejar para próximos artículos, por no complicarnos ahora, que esto es una mera introducción al envío de formularios con Ajax. En desarrollo web .com iremos publicando nuevos artículos sobre el tema, para ir mostrando las posibilidades y ventajas de usar Mootools para el trabajo con Ajax.
Como siempre hacemos, os dejamos el link para ver el ejemplo que vamos a realizar en marcha.
Código HTML
Pasamos directamente a mostrar el código HTML del formulario:
<form id="miformulario" action="recibe-formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="20">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<input type="submit" value="Enviar">
</form>
Como se puede ver, es un formulario exactamente igual a cualquiera realizado con HTML. Está compuesto por sólo dos campos de texto y un botón de submit.
Cabe destacar que el formulario se envía a la página recibe-formulario.php y que se va a enviar por POST.
Código Javascript para enviar el formulario por Ajax
Ahora vamos a ver el código Javascript, utilizando Mootools, que requeriría la pagina para utilizar Ajax en el envío del formulario. El script es muy sencillo y lo he comentado para que se pueda entender mejor. Ahora bien, si no conocemos previamente un poco de Mootools nos sonará a chino. Así que recodar la referencia al Manual de Mootools o a la documentación del propio framework.
window.addEvent('domready', function() {
//Vamos a recibir el elemento formulario
elementoFormulario = $("miformulario");
//Vamos a añadir un evento al formulario para cuando se envíe
elementoFormulario.addEvent('submit', function(e) {
//primero voy a parar el evento para que no se envíe como lo haría normalmente
e.stop();
//Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax
//Luego definimos qué hacer cuando se envía el formulario
//Aquí "this" se refiere al formulario sobre el que defino el evento
this.set('send', {
//onComplete sirve para definir qué hacer cuando se recibe la respuesta
onComplete: function(respuesta) {
//escribo la respuesta en la capa "resultado"
$("resultado").set('html', respuesta);
}
});
//Envío el formulario
this.send();
});
});
Básicamente lo que se hace es crear un evento para ejecutar cuando el formulario se envíe (evento submit). El evento lo programamos para que se detenga el proceso habitual de submit y a continuación codificamos el envío con Ajax.
Para enviar un formulario con Ajax desde Mootools, lo único que tenemos que hacer es ejecutar el método send() del elemento formulario:
formulario.send();
Pero claro, antes tenemos que decirle qué queremos hacer cuando se complete el envío y cómo mostrar la respuesta recibida después de ello. Para ello tenemos que definir otro evento onComplete, que asociamos al envío "send".
El evento onComplete recibe un parámetro que es el texto que se recibe como respuesta al procesar el formulario. Dentro de onComplete podremos hacer lo que queramos con la respuesta del procesamiento del form. La respuesta se generará mediante un lenguaje de programación del lado del servidor, como PHP, .NET, ASP, o lo que queramos.
Este código Javascript se podría ampliar mucho con tantos efectos o utilidades como necesitemos, como mostrar una imagen de carga. Repito que tenemos planificada la publicación de artículos adicionales sobre este tema en desarrolloweb .com, donde veremos con detalle más adelante estos usos.
Código PHP para procesar el formulario
La respuesta de procesar el formulario se genera en el script que lo recibe. Si nos fijamos en el código HTML del formulario, veremos que el action="recibe-formulario.php". Así que tendremos que crear ese archivo PHP para recibirlos datos y hacer algo con ellos.
<?
echo "Nombre: " . $_POST["nombre"];
echo "<br>";
echo "Edad: " . $_POST["edad"];
?>
Esto es lo más sencillo que podemos hacer con el formulario, simplemente mostrar sus datos. Para ello hacemos unos cuantos echo de PHP. Todo lo que se escriba en la página mediante PHP se recibirá como respuesta de la solicitud Ajax.
Todo el código del ejemplo de procesamiento de formulario en Ajax
Veamos todo el código junto.
<html>
<head>
<title>Ejemplo de envío de formulario por Ajax con Mootools</title>
<script src="mootools-1.2.js" type="text/javascript"></script>
<script>
window.addEvent('domready', function() {
//Vamos a recibir el elemento formulario
elementoFormulario = $("miformulario");
//Vamos a añadir un evento al formulario para cuando se envíe
elementoFormulario.addEvent('submit', function(e) {
//primero voy a parar el evento para que no se envíe como lo haría normalmente
e.stop();
//Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax
//Luego definimos qué hacer cuando se envía el formulario
//Aquí "this" se refiere al formulario sobre el que defino el evento
this.set('send', {
//onComplete sirve para definir qué hacer cuando se recibe la respuesta
onComplete: function(respuesta) {
//escribo la respuesta en la capa "resultado"
$("resultado").set('html', respuesta);
}
});
//Envío el formulario
this.send();
});
});
</script>
</head>
<body>
<form id="miformulario" action="recibe-formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="20">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<input type="submit" value="Enviar">
</form>
<div id="resultado"></div>
</body>
</html>
Para que este código funcion faltaría el script PHP para procesar el formulario, que estaría en un archivo aparte, en el mismo directorio que el código HTML.
Podemos ver este ejemplo en marcha en una página aparte.
Por ahora vamos a intentar presentar un formulario muy sencillo y cómo podemos enviarlo con Ajax utilizando el menor número de líneas de código posibles. Luego complicaremos el ejemplo, para añadir efectos y otras cosas interesantes, pero lo vamos a dejar para próximos artículos, por no complicarnos ahora, que esto es una mera introducción al envío de formularios con Ajax. En desarrollo web .com iremos publicando nuevos artículos sobre el tema, para ir mostrando las posibilidades y ventajas de usar Mootools para el trabajo con Ajax.
Como siempre hacemos, os dejamos el link para ver el ejemplo que vamos a realizar en marcha.
Referencia: en artículos anteriores ya hemos visto otros ejemplos de Ajax con Mootools. Consultar el artículo Ajax con Mootools.
Código HTML
Pasamos directamente a mostrar el código HTML del formulario:
<form id="miformulario" action="recibe-formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="20">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<input type="submit" value="Enviar">
</form>
Como se puede ver, es un formulario exactamente igual a cualquiera realizado con HTML. Está compuesto por sólo dos campos de texto y un botón de submit.
Cabe destacar que el formulario se envía a la página recibe-formulario.php y que se va a enviar por POST.
Código Javascript para enviar el formulario por Ajax
Ahora vamos a ver el código Javascript, utilizando Mootools, que requeriría la pagina para utilizar Ajax en el envío del formulario. El script es muy sencillo y lo he comentado para que se pueda entender mejor. Ahora bien, si no conocemos previamente un poco de Mootools nos sonará a chino. Así que recodar la referencia al Manual de Mootools o a la documentación del propio framework.
window.addEvent('domready', function() {
//Vamos a recibir el elemento formulario
elementoFormulario = $("miformulario");
//Vamos a añadir un evento al formulario para cuando se envíe
elementoFormulario.addEvent('submit', function(e) {
//primero voy a parar el evento para que no se envíe como lo haría normalmente
e.stop();
//Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax
//Luego definimos qué hacer cuando se envía el formulario
//Aquí "this" se refiere al formulario sobre el que defino el evento
this.set('send', {
//onComplete sirve para definir qué hacer cuando se recibe la respuesta
onComplete: function(respuesta) {
//escribo la respuesta en la capa "resultado"
$("resultado").set('html', respuesta);
}
});
//Envío el formulario
this.send();
});
});
Básicamente lo que se hace es crear un evento para ejecutar cuando el formulario se envíe (evento submit). El evento lo programamos para que se detenga el proceso habitual de submit y a continuación codificamos el envío con Ajax.
Para enviar un formulario con Ajax desde Mootools, lo único que tenemos que hacer es ejecutar el método send() del elemento formulario:
formulario.send();
Pero claro, antes tenemos que decirle qué queremos hacer cuando se complete el envío y cómo mostrar la respuesta recibida después de ello. Para ello tenemos que definir otro evento onComplete, que asociamos al envío "send".
El evento onComplete recibe un parámetro que es el texto que se recibe como respuesta al procesar el formulario. Dentro de onComplete podremos hacer lo que queramos con la respuesta del procesamiento del form. La respuesta se generará mediante un lenguaje de programación del lado del servidor, como PHP, .NET, ASP, o lo que queramos.
Este código Javascript se podría ampliar mucho con tantos efectos o utilidades como necesitemos, como mostrar una imagen de carga. Repito que tenemos planificada la publicación de artículos adicionales sobre este tema en desarrolloweb .com, donde veremos con detalle más adelante estos usos.
Código PHP para procesar el formulario
La respuesta de procesar el formulario se genera en el script que lo recibe. Si nos fijamos en el código HTML del formulario, veremos que el action="recibe-formulario.php". Así que tendremos que crear ese archivo PHP para recibirlos datos y hacer algo con ellos.
<?
echo "Nombre: " . $_POST["nombre"];
echo "<br>";
echo "Edad: " . $_POST["edad"];
?>
Esto es lo más sencillo que podemos hacer con el formulario, simplemente mostrar sus datos. Para ello hacemos unos cuantos echo de PHP. Todo lo que se escriba en la página mediante PHP se recibirá como respuesta de la solicitud Ajax.
Todo el código del ejemplo de procesamiento de formulario en Ajax
Veamos todo el código junto.
<html>
<head>
<title>Ejemplo de envío de formulario por Ajax con Mootools</title>
<script src="mootools-1.2.js" type="text/javascript"></script>
<script>
window.addEvent('domready', function() {
//Vamos a recibir el elemento formulario
elementoFormulario = $("miformulario");
//Vamos a añadir un evento al formulario para cuando se envíe
elementoFormulario.addEvent('submit', function(e) {
//primero voy a parar el evento para que no se envíe como lo haría normalmente
e.stop();
//Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax
//Luego definimos qué hacer cuando se envía el formulario
//Aquí "this" se refiere al formulario sobre el que defino el evento
this.set('send', {
//onComplete sirve para definir qué hacer cuando se recibe la respuesta
onComplete: function(respuesta) {
//escribo la respuesta en la capa "resultado"
$("resultado").set('html', respuesta);
}
});
//Envío el formulario
this.send();
});
});
</script>
</head>
<body>
<form id="miformulario" action="recibe-formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="20">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<input type="submit" value="Enviar">
</form>
<div id="resultado"></div>
</body>
</html>
Para que este código funcion faltaría el script PHP para procesar el formulario, que estaría en un archivo aparte, en el mismo directorio que el código HTML.
Nota: Para que el ejemplo funcione tenemos que ponerlo en un servidor web, porque el envío se realiza por http y porque la página PHP debe ser interpretada y procesada por el servidor web.
Podemos ver este ejemplo en marcha en una página aparte.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...