Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

AJAX IX

Enviar datos con GET

Utilizar PHP

Hasta ahora hemos utilizado ajax para insertar datos de otros archivos. Sin embargo mediante ajax también podemos enviar datos al servidor.

Para que el servidor pueda recoger los datos y trabajar con ellos, éste debe tener un lenguaje de servidor, que puede ser PHP, ASP, JSP.

Nosotros utilizaremos PHP, ya que es el lenguaje que utilizan la mayoría de servidores y además podemos instalar un servidor local fácilmente (XAMPP) para comprobar lo que hacemos. Debemos por tanto conocer el lenguaje PHP. Si no es así puedes aprenderlo en nuestro curso de PHP básico.

Cuando enviamos datos al servidor, estos los recoge en una página PHP que habremos creado para ello. La misma página PHP puede generar texto que nos será devuelto a la página principal.

Enviar mediante GET

Para enviar datos al servidor, podemos hacerlo mediante los métodos GET o POST, tal como se hace con los formularios. Sin embargo el método de envio en ajax es totalmente distinto si se hace con GET o con POST. Veremos aquí el envío con GET, dejando el POST para páginas posteriores.

En PHP hay varias formas de pasar datos al servidor. Una de ellas es pasar las variables por URL, Esta es la forma que se emplea con GET. Aquí al escribir la ruta en el método open, escribimos también las variables que vamos a pasar; de forma similar a lo explicado también en el curso de PHP, página 4.2. Pasar variables por URL.

Vemos un ejemplo de cómo pasar variables por url y lo explicamos luego:

open("GET","archivo.php?nombre=valor",true);

En el segundo parámetro del método open indicamos el archivo y los datos que enviamos, veamos lo que hemos puesto:

Tal como hemos puesto aquí el nombre de la variable y su valor tienen valores fijos, ya que los pasamos dentro de las comillas. Sin embargo no siempre sabemos el nombre del valor de la variable, sino que éste puede estar recogido en otra variable. Por ejemplo imagina un formulario en el que el usuario nos indica su e-mail, y lo recogemos en una variable llamada email. Queremos enviar este dato al servidor, la url que le pasaremos será la siguiente:

url="archivo.php?enviaEmail="+email;

es decir sacamos fuera de las comillas el valor para poder enviar el contenido de la variable email.

Luego la enviamos en el método open:

open ("GET",url,true);

Podemos enviar más de un par "nombre=valor" por la url, para ello a partir del segundo los escribiremos separándolos del anterior por el signo & Las siguientes líneas indican cómo prepararemos una url para enviar tres datos distintos que podemos haber obtenido del usuario mediante un formulario:

ruta="archivo.php";
envio1="enviarEmail="+email;
envio2="enviarTelefono="+telefono;
envio3="enviarContras="+contras;
url=ruta+"?"+envio1+"&"+envio2+"&"+envio3;
open ("GET",url,true);

Para recoger los datos en el archivo PHP, lo haremos mediante el array predeterminado $_GET["nombre"]. Es decir el en archivo "archivo.PHP" pondremos:

$email=$_GET["enviarEmail"];
$telefono=$_GET["enviarTelefono"];
$contras=$_GET["enviarContras"];

De este modo los datos obtenidos mediante un formulario los pasamos a un archivo PHP. Una vez ahí pueden ser analizados, guardados en archivos, o en bases de datos, etc. La misma página del servidor puede dar una respuesta, que recogemos en la propiedad de XMLHttpRequest responseText.

Enviar datos mediante "GET" no requiere tener que variar nada en la forma de enviar archivos, sólo la url, por lo que podemos usar el objeto ObjetoAjax() creado en las páginas anteriores, con las mismas propiedades y métodos que le hemos puesto.

Ejemplo de envío de datos con GET.

Crearemos un ejemplo con un pequeño formulario en el que pediremos al usuario el Email y una contraseña que tiene que repetir. Enviamos estos datos al servidor, el cual comprueba si son correctos y según el resultado devolverá un mensaje u otro.

Veamos en primer lugar la página HTML con el formulario, a la cual hemos llamado ejemplo9.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo 9</title>
<script type="text/javascript" src="objetoAjax.js"></script>
<script type="text/javascript" src="ejemplo9.js"></script>
</head>
<body>
<h1>Envio de datos por GET</h1>
<h2>Comprobación del siguiente formulario.</h2>
<form name="datos">
<p>Escribe un email: <input type="text" name="miemail" ></p>
<p>Escribe una contraseña: (entre 6 y 10 caracteres) 
   <input type="password" name="micontra1"/>
<p>Repite la contraseña: 
   <input type="password" name="micontra2"/>
<p>Enviar formulario: 
   <input type="button" value="Enviar" onclick="enviar()" />
<p>Reiniciar formulario: 
   <input type="reset" value="Reiniciar" /></p>
</form>
<h3>Comprobación</h3>
<div id="comp">
<p>Aquí se comprobarán los datos</p> 
</div>
</body>
</html>

Hemos puesto el código javascript en archivo aparte, así tenemos primero un link al archivo objetoAjax.js donde está el objeto ajax, y otro a el archivo ejemplo9.js que contiene el código específico de la página.

En el formulario hemos sustituido el boton de envio (submit) por un boton normal (button) al que le hemos puesto un onclick que nos abre una función que mediante ajax nos conectará con la página PHP.

El Archivo objetoAjax.js es el mismo usado en páginas anteriores. El archivo ejemplo9.js será el siguiente:

function enviar() {
   //Recoger datos del formulario:
   reemail=document.datos.miemail.value; //Email escrito por el usuario
   recontra1=document.datos.micontra1.value; //Contraseña primera
   recontra2=document.datos.micontra2.value; //Contraseña segunda
   //Escribir la url para enviar los datos anteriores:
   ruta="ejemplo9.php" //ruta del archivo
   envio1="envioEmail="+reemail; //datos email
   envio2="envioContra1="+recontra1; //datos contraseña 1ª
   envio3="envioContra2="+recontra2; //datos contraseña 2ª
   url=ruta+"?"+envio1+"&"+envio2+"&"+envio3; //url para enviar
   ajax1=new ObjetoAjax; //instanciar objeto ObjetoAjax;
   ajax1.pedirTexto(url,"comp"); //método que devuelve texto en un id.
   }

El archivo Javascript consta de la función que se abre al pulsar el botón de envio. Ésta consta de tres partes, en la primera recogemos los datos del formulario; en la segunda preparamos la url para enviarlos, y en la tercera los enviamos mediante ajax.

Los datos han sido enviados a un archivo llamado ejemplo9.php. Debemos crear este archivo el cual recoge los datos, los analiza, y nos devuelve un resultado. El archivo ejemplo9.php será el siguiente:

<?php  
$compEmail=0; //valor inicial para combrobación email.
$compContra=0;  //valor inicial para comprobacion contraseña
$email=$_GET["envioEmail"];//recoger datos de email
$contra1=$_GET["envioContra1"]; //recoger datos de contraseña 1ª
$contra2=$_GET["envioContra2"]; //recoger datos de contraseña 2ª
if (strlen($email)>0) { //si hay algo escrito en contraseña ....
    $num1=substr_count($email,"@"); //número de signos @ escritos en el email;
    if ($num1==1) { //correcto si ha una @ en el email
        $textoEmail="<p>Escritura de e-mail correcta</p>";
        $compEmail=1; //comprobación correcta de Email
        }
    else { //incorrecto si hay más o menos de 1 @ en email.
        $textoEmail="<p>El e-mail no se ha escrito correctamente.</p>";
        }
    }
else { //si no hay nada escrito en email ...
   $textoEmail="<p>No has escrito ningun e-mail.</p>"; 
   }
if (strlen($contra1)<6 or strlen($contra2)<6) { //contraseñá menos de 6 caracteres: 
   $textoContra="<p>La contraseña o su repetición tienen menos de 6 caracteres.</p>";
   }
elseif (strlen($contra1)>10 or strlen($contra2)>10) { //contraseña más de 10 caracteres:
   $textoContra="<p>La contraseña o su repetición tienen más de 10 caracteres.</p>";
   }
elseif ($contra1 != $contra2) { //contraseña y repetición distintas
   $textoContra="<p>La contraseña y su repetición no son iguales</p>";
   }
else { //la contraseña y su repetición son correctas.
   $textoContra="<p>La contraseña es correcta.</p>";
   $compContra=1; //Contraseña correcta
   }
if ($compEmail==1 and $compContra==1) { //si todo está correcto enviar mensaje ...
   echo $textoEmail.$textoContra;
   echo "<p>Los datos son correctos y han sido enviados.</p>";
   }
else{ //Si hay algún fallo enviar mensaje ...
   echo $textoEmail.$textoContra;
   echo "<p>Datos incorrectos. Revisa el formulario y envíalo otra vez.</p>";
   }
?>

El resultado de este ejemplo puedes verlo en la página del siguiente enlace:

Ejemplo 9

En el archivo PHP primero recogemos los datos mediante el array $_GET["nombre"]; y después realizamos una serie de comprobaciones mediante condicionales. Dependiendo de lo que hayamos puesto recibiremos un mensaje u otro.

Habrás observado que para evitar problemas con los acentos y letra ñ hemos sustituido los caracteres por sus respectivas entidades. Aunque esta es una forma rudimentaria de resolver el problema, trataremos esto en páginas posteriores.






En la siguiente página veremos cómo pasar datos mediante el método POST

aquí irá el título de la siguiente página

Enviar datos con POST



Manual Ajax

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo