Ejemplo sencillo con Ajax – Comprobar disponibilidad de un nick
Escrito por Jorge Bravo el 19 julio, 2009
Este es un ejemplo sencillo de ajax para comprobar si ya existe el nick del usuario en la base de datos cuando se va a registrar. El ejemplo claramente puede ampliarse para dejarlo mas profesional, pero lo realmente importantes es que apreciemos el potencial de este tipo de scripts.
La única librería que necesitamos descargar es prototype.js y llamarla en el HEAD de nuestra web:
1 | <script src="/js/prototype.js" type="text/javascript"></script> |
En el formulario, en el INPUT donde hay que introducir el nick de usuario pondremos un evento javascript onKeyUp llamando a nuestra función para comprobar si existe el nick. Usamos el evento onKeyUp para que se llame a la función cada vez que se introduzca una letra. También insertamos una sección SPAN, donde se escribirá si existe el usuario o no.
1 | <input onkeyup="comprobar(this.value)" name="nickname" /> |
Aqui nuestra etiqueta SPAN para que muestre el resultado
1 | <span id=”comprobar_mensaje” ></span> |
Ahora definimos también la función “comprobar” dentro del HEAD:
1 2 3 4 5 6 7 8 9 | <script type="text/javascript">// < ![CDATA[ //<![CDATA[ function comprobar(nick) { var url = 'http://'+location.host+'/ajax_comprobar_nick.php'; var pars = ("nickname=" + nick); var myAjax = new Ajax.Updater( 'comprobar_mensaje', url, { method: 'get', parameters: pars}); } // ]]></script> |
La variable “url” es la dirección donde se encuentra el archivo php que comprobará si existe el nick en la base de datos.
En la variable “pars” escribimos las diferentes varibles que vamos a pasar al anterior php.
El primer parámetro de Ajax.Updater es la etiqueta html que se va a actualizar con el resultado de la función (diciendo si existe el usuario o no). El segundo parámetro es la variable “url” con la dirección del archivo php que ya hemos definido antes. En el tercer parámetro decimos el método por el que pasar las variables a la función (normalmente GET) y las variables que vamos pasar (que hemos definido en la variable “pars”).
El archivo ajax_comprobar_nick.php tendrá el siguiente contenido:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php // Que no se nos olvide incluir nuestro fichero con la conexion a la base de datos. include("conexion.php"); $nick=$_REQUEST['nickname']; $sql="SELECT nick FROM usuarios WHERE nick='$nick'"; $res=mysql_query($sql); $total=mysql_num_rows($res); if($total>0) { // El usuario existe en la Base de Datos echo "Este nick está ocupado"; } else { // Ese nick esta libre echo "Nick libre"; } > |
Ahora cada vez que se escriba una letra en el campo nick del formulario, se llamará al fichero php anterior para comprobar si existe el nick en la base de datos y se actualizará el campo SPAN “comprobar_mensaje” con el resultado.
Archivos del ejercicio (673)
Articulo Original : NotasWeb
Artículos relacionados
Comentarios (4)
Creo que te falto especificar donde va el spam,
Solucion:
va despues del campo de texto del nick,
de esta forma
input onkeyup=”comprobar(this.value)” name=”nickname”
span id=”comprobar_mensaje” /span
bueno ustedes solo le ponen los caracteres especiales ya que esto no me deja hacer eso….
Disculpa por no a ver contestado antes, si tienes razón el campo SPAN se coloca despues de el INPUT de texto.
Para colocar código en los comentarios puedes usar el TAG “code”
A ver si subo de una vez los archivos de ejemplo del ejercicio.