Hola amigos, tengo un video donde se ve lo que se puede realizar con php ajax para comprobar la existencia de un usuario, ahora vamos a explicar en detalle como hacerlo, primero el video
Nota: este codigo lo encontre en internet, le modifique algunos puntos, asi que va el credito a quien realizo gran parte de este codigo.
vamos a lo nuestro, primero creamos una tabla en nuestra base de datos con nombre usuarios y dos campos id y usuario tenemos nuestro formulario.php con un campo tipo text y nombre txt_username, este es la pag. donde se muestra al usuario el campo a ingresar y donde se obtiene la respuesta si el nombre de usuario esta disponible o no, el cod. completo seria:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="javascript/ajaxformulario.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.ok{
background-color:#99FF99;
font-family: Calibri;
font-weight: bold;
color: #999999;
font-size:12px;
}
.error{
background-color:#FFAAAA;
font-family: Calibri;
font-weight: bold;
color: #999999;
font-size:12px;
}
.form_alert_msg {
font-size: 14px;
font-weight: Calibri;
color: #006666;
display:inline;
background-color: #FFFFCC;
padding: 2px 5px;
margin-left: 5px;
border-top: 1px solid #D4E0EE;
border-right: 1px solid #D4E0EE;
border-bottom: 1px solid #D4E0EE;
border-left: 1px solid #D4E0EE;
}
</style>
</head>
<body>
<body>
<div id="estadoUser"></div>
<form name="myform" id="myform" method="post" onSubmit="return checkForm(this);" action="">
<div><label >Usuario:</label>
<input name="txt_username" type="text" id="txt_username" onblur="checkField(this);" onkeyup="javascript:ComprobarUsuario('./comprobarUser.php','estadoUser')" size="12" maxlength="12" />
</div>
</form>
</body>
</html>
Podemos observar que se agregar un archivo javascript y que además se asigna mediante css un color cuando esta ok y otro cuando hay error (verde y rojo en nuestro caso)
primero hacemos la conexion a nuestra base de datos, dejo el ejemplo y los datos que deberian modificar conexion.php
<?php //Configuracion de la conexion a base de datos $bd_host = "localhost";// definir host $bd_usuario = "root"; // definir usuario $bd_password = ""; // definir password $bd_base = "prueba"; // definir base de datos $con = mysql_connect($bd_host, $bd_usuario, $bd_password); mysql_select_db($bd_base, $con); ?>
ahora veremos el codig. del archivo comprobarUser.php, este archivo es el que se conecta a nuestra base de datos y comprueba la existencia o no del usuario mostrando un msje en cada caso
<?php
require('conexion.php');
$colname_rs_user = "-1";
if (isset($_POST['username'])) {
$colname_rs_user = $_POST['username'];
}
//mysql_select_db($database_conn, $conn);
$query_rs_user = sprintf("SELECT * FROM usuarios WHERE usuario = '%s'",$colname_rs_user);
$rs_user = mysql_query($query_rs_user, $con) or die(mysql_error());
$row_rs_user = mysql_fetch_assoc($rs_user);
$totalRows_rs_user = mysql_num_rows($rs_user);
if($totalRows_rs_user == 0)
{
echo '<div align="center" class="ok">Nombre de usuario disponible';
}
else{
echo '<div align="center" class="error">Nombre de usuario Ocupado';
}
?>
<?php
mysql_free_result($rs_user);
?>
ahora creamos el directorio javascript, con el archivo ajaxformulario.js
function getXMLHttpRequest(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function TraerPagina(datos,contenedor){
divResultado = document.getElementById(contenedor);
ajax=getXMLHttpRequest();
ajax.open("GET", datos);
ajax.onreadystatechange=function(){
if(ajax.readyState==1)
{divLoader.innerHTML='<br/><br/><br/><center><img widht="50" height="50" src="./bigrotation2.gif"/><br/>Cargando...</center>'}
else{
if(ajax.readyState==4){divResultado.innerHTML=ajax.responseText;divLoader.innerHTML=''}
}
}
ajax.send(null)
}
function ComprobarUsuario(datos,contenedor){
divResultado = document.getElementById(contenedor);
username_=document.myform.txt_username.value;
ajax=getXMLHttpRequest();
ajax.open("POST", datos);
ajax.onreadystatechange=function(){
if(ajax.readyState==1)
{divResultado.innerHTML='<br/><br/><br/><center><img widht="50" height="50" src="../img/bigrotation2.gif"/><br/>Cargando...</center>'}
else{
if(ajax.readyState==4)
{divResultado.innerHTML=ajax.responseText;}
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send("username="+username_);
}
Bueno eso seria, ahora llenen la tabla con algún usuario y prueban que tal funciona
saludos a todos
Advertisement
excelente aporte
Por: mario9 el enero 24, 2012
a las 5:10 pm