Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (I Básico)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 214

Visitas el mes pasado: 29

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.


MooTools (XV)

Ajax: enviar datos

imagen mootools

Introducción

En la página anterior hemos visto cómo recibir archivos con Ajax usando mootools. Sin embargo con Ajax también podemos enviar datos desde nuestra página hacia el servidor.

Enviar datos al servidor supone que éstos se recibirán en otro archivo, normalmente un archivo en PHP. Si hemos visto un poco el PHP sabremos que hay dos métodos de enviar los datos, el GET y el POST. En el Manual de ajax, pagina 9 y siguientes explicamos cómo enviar datos con Ajax.

Con mootools es algo más sencillo, ya que utilizamos los objetos Request(), o Request.HTML para enviar los datos. De todas formas el archivo PHP que los recibe debe ser parecido.


Envio de datos

Para enviar datos con ajax utilizando mootools, utilizaremos también el objeto Request() Para ello primero debemos preparar los datos los cuales se escribirán en la forma:

datos="dato1=valor1&dato2=valor2&dato3=valor3"

Esta forma de preparar los datos en una cadena ya se ha explicado en el manual de Ajax.

Después en el objeto Request(), dentro de la lista de opciones en el argumento, pondremos las opciones "method", que puede tener el valor "get" o "post"; y también la opcion "data", con el valor de la cadena de datos. Quedará de la siguiente manera:

miAjax=new Request({
   "url":"miarchivo.php",
   "method":"post",
   "data":datos,
   "onSucces":function(respuesta) { 
      /..función para recoger el archivo.
      }
   }).send();

Como vemos seguimos utilizando el objeto Request(), tal como hacíamos para recibir archivos, al cual le hemos añadido las opciones "method" y "data".

En "method", sólo podemos utilizar como valor "get" o "post"; y en "data" debemos pasar los datos en forma de cadena, según el patrón indicado.

Después en el archivo PHP recogeremos los datos, esto será algo parecido a lo siguiente (suponiendo que hemos mandado la cadena del ejemplo anterior):

<?php 
$dato1=$_POST["dato1"];
$dato2=$_POST["dato2"];
$dato3=$_POST["dato3"];
?>

El envio con "get" es similar. Simplemente elegimos como método "get", y en la página PHP de recogida de datos, los recogemos mediante $dato1=$_GET["dato1"]; .

Para el envio de datos podemos usar el objeto Request(), o también el objeto Request.HTML, tal cómo se ha visto en la página anterior, siempre que le añadamos las opciones "method" y "data".


Ejemplo de envio de datos:

Haremos un ejemplo aquí de envio de datos recogidos mediante un formulario. Estos los mandamos a un archivo PHP. Los datos enviados nos son devueltos a un elemento con id="capa1".

En primer lugar ponemos el código en html en nuestra página, el cual será el siguiente:

<div id="capa1">pulsa "enviar" para ver datos con ajax ...</div>
<form name="tusdatos">
  <p>Nombre: <input type="text" name="tunombre" /> </p>
  <p>Apellido: <input type="text" name="tuapellido" /> </p>
  <p>Localidad: <input type="text" name="tuciudad" /> </p>
  <p><input type="button" id="boton1" value="enviar con Ajax" />
</form>

Este es el formulario y el elemento "capa 1" donde recibimos los datos:

pulsa "enviar" para ver datos con ajax ...

Nombre:

Apellido:

Localidad:

Ahora para que funcione en primer lugar ponemos el código en javascript/mootools. Lo ponemos dentro del evento "click" que activa el botón, y mandamos los datos por "get":


$("boton1").addEvent("click",function(){
   //recoger datos del formulario
   nombre=document.tusdatos.tunombre.value;
   apellido=document.tusdatos.tuapellido.value;
   ciudad=document.tusdatos.tuciudad.value;
   //preparar datos:
   envioDatos="nombre="+nombre+"&apellido="+apellido+"&ciudad="+ciudad;
   //objeto Request.HTML:
   new Request.HTML({
      "url":"recibir.php",
      "method":"get",
      "data":envioDatos,
      "update":"capa1"
      }).send();
});

En primer lugar recogemos los datos del formulario. Esto lo hacemos simplemente con código javascript. Después preparamos la variable con los datos, tal como debemos pasarlos. En tercer lugar instanciamos el objeto Request.

Aquí hemos puesto el objeto Request.HTML() ya que queremos que se nos devuelva un código HTML que se vuelca directamente en la página.

Por último nos falta crear el archivo recibir.php. Este es un archivo PHP que nos devuelve un contenido en HTML. Nosotros hemos puesto el siguiente archivo:

<?php  
header("Content-Type: text/plain; charset=iso-8859-1");
echo "<h2>Envio con Ajax</h2>";
$nombre=$_GET["nombre"];
$apellido=$_GET["apellido"];
$ciudad=$_GET["ciudad"];
echo "<p>Hola $nombre $apellido de $ciudad.</p>";
echo "<p>Bienvenido a mi página</p>";
?>

Como ves hemos recogido los datos enviados y los hemos vuelto a poner en la página de nuevo. Debes saber algo de PHP si quieres guardar los datos, transformarlos o sacarlos en otra página una vez recibidos.


Otras opciones de Request()

En estas dos páginas dedicadas a Ajax hemos visto que el uso de ajax con mootools se reduce al uso del objeto Request(), y a una serie de opciones que podemos poner en su argumento.

Hasta ahora hemos visto las opciones "url", "onSuccess", "method", "data" y con Request.HTML() la opción "update". Sin embargo el objeto Request admite otra serie de opciones, que, aunque son poco utilizadas a veces hay que tener en cuenta. Veamos cuáles son:






Aquí acaba la primera parte del manual de mootools, donde hemos visto el funcionamiento básico para hacer las mismas cosas que con javascript, sólo que un poco más simplificadas. En la segunda parte trataremos una característica muy importante de mootools: los multiples efectos especiales que se pueden hacer en la página

Segunda parte: Mootools - efectos.



Manual de Mootools (I Básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com