Vamos a ordenar un poco eso, si vas a usar Ajax para enviar el form, la idea es no tener que recargar la página del loguin, si no directamente envias con el submit, además un json para solo devolver la combinación user-pass?
Por otro lado tenés que prevenir que el usuario no deshabilite javascript
Esto deberías hacerlo asi
Código:
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Loguin</title>
<script type="text/javascript">
//<![CDATA[
//var Datos;
function valida(){
var us =document.getElementById('usuario');
var cl = document.getElementById('clave');
if((limpiar(us.value).length === 0)||(limpiar(cl.value).length === 0)){
alert('complete ambos campos');
return false; // hasta aqui si no completó los campos no pasa nada ya que devuelve false al evento onsubmit que llama la función con return
}else{
// ejecutamos ajax
var xmlHttp=null;
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
} // creaste el objeto
xmlHttp.onreadystatechange=function(){ // ejecutás el código
if (xmlHttp.readyState==4 && xmlHttp.status==200){
if(xmlHttp.responseText != 'ok'){
alert('nombre o clave incorrectos');
}else{
document.getElementById('loguin').style.display = "none";
document.getElementById('mensaje').innerHTML = "Estás logueado como " + us.value;
}
}
}
xmlHttp.open("POST",'entrar.php',true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("usuario="+us.value+"&clave="+cl.value);
return false; // siempre devuelve flase para prevenir el submit
}
}
// función adicional para prevenir que te pasen caracteres en blanco
function limpiar(valor){
var valor_campo = valor.replace(/^\s+/g,'').replace(/\s+$/g,'');
return valor_campo;
}
//]]>
</script>
</head>
<body>
<p>Combinación válida = usuario:emprear, clave:fdw </p>
<form action="entrar.php" onsubmit="return valida();" id="loguin" method="post">
usuario: <input type="text" name="usuario" id="usuario" /><br />
passwd: <input type="password" name="clave" id="clave" /><br />
<input type="submit" value="ingresar" />
</form>
<p id="mensaje">
<!-- mensaje loguin -->
</p>
</body>
</html>
un php simple para probarlo,
entrar.php
Código PHP:
Ver original<?php
$u = $_POST['usuario'];
$p = $_POST['clave'];
if(($u == "emprear") && ($p == "fdw")){
echo "ok";
}else{
echo "usuario y/o clave no validas";
}
?>
En tu caso deberías consultar la base de datos, si la consulta sql arroja un resultado, obviamente en tu tabla la combinación usuario-contraseña debe de ser unica, haces un echo "ok", para que el ajax reciba la respuesta para evaluar, supongo también, que si hay validación exitosa, crearás las sesiones correspondientes
Demo funcionando (ejecutala con y sin javascript activado en el navegador
http://foros.emprear.com/ajax/loguin/
Saludos