- Carpeta contenedora:
- Carpeta js
- Sub-Carpeta
ajax
- Archivo JS
ajaxlogin.js
- Archivo JS
- Sub-Carpeta
- Carpeta
php
- Archivo PHP
consultas.PHP
- Archivo PHP
- Archivo HTML
index.html
- Carpeta js
Mi código es el siguiente:
index.html
<!DOCTYPE html>
<html lang="ES-MX">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/estilo.css">
<title>Login HTML,JS,PHP y MySQL </title>
</head>
<body>
<header class="card-header text-center">
<h1><strong>Ejemplo Login</strong></h1>
<h5>HTML, JS, PHP y MySQL</h5>
</header>
<section class="container">
<div class="row justify-content-center row-login">
<div class="col-5 form_login bg-light">
<div class="row bg-primary text-white justify-content-center"><h3 class="text-center">Iniciar Sesión</h3></div>
<div id="warning-div" class="row bg-warning justify-content-center display-none">
<small id="warning-text" class="text-center">
</small>
</div>
<div class="">
<form action="">
<div class="form-group">
<label for="login">Usuario:</label>
<input type="text" name="txtUsuario" class="form-control" placeholder="Usuario" id="loginUsuario">
</div>
<div class="form-group">
<label for="login_con">Contraseña:</label>
<input type="text" name="txtContraseña" class="form-control" placeholder="Contraseña" id="loginContrasena">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="btnAceptar" onclick="login()">Aceptar</button>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="card-footer bg-dark text-white text-center ">Copyright 2017</footer>
<script src="js/ajax/ajaxlogin.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/jquery-3.2.1.js"></script>
</body>
</html>
consultas.php
<?php
include("bd/conexionbd.php");
$usuario=$_POST['Usuario'];
$contrasena=$_POST['Password'];
$cmd= $conn->prepare('SELECT usuario, rol_usuario.nombre_Rol FROM usuario inner join rol_usuario on usuario.id_Rol=rol_usuario.id_Rol where Usuario=? AND Contrasena=?');
$cmd->bind_param('ss',$nom_usuario, $usuario_cont);
$nom_usuario=$usuario;
$usuario_cont=md5($contrasena);
$cmd->execute();
/*Se vincula las variables al resultado*/
$cmd->bind_result($user,$rol);
/*Almacenar el resultado*/
$cmd->store_result();
/*Se comprueba si hay resultados*/
if ($cmd->num_rows>0) {
echo'hay resultados';
$cmd->fetch();
echo "$user"." ".$rol;
}else{
echo 'no hay resultados';
}
?>
ajaxlogin.js
function login(){
if ($('#loginUsuario').val()===""|| $('#loginContrasena').val()==="") {
$('#warning-div').css({
'display': 'block'
});
$('#warning-div').addClass('row bg-danger justify-content-center text-center');
$('#warning-text').addClass('text-white');
document.getElementById('warning-text').innerHTML='Hay Campos Vacios';
}else{
var usuario= $('#loginUsuario').val();
var password =$('#loginContrasena').val();
ajaxLogin(usuario,password);
}
}
function ajaxLogin(usuario,password){
alert('Entraste al ajax');
$.ajax({
url: '../../php/consultas.php',
type: 'POST',
dataType: 'html',
data: "Usuario="+usuario+"&Password="+password,
beforeSend: function(){
$('#warning-div').css({
'display': 'block'
});
$('#warning-div').addClass('row bg-warning justify-content-center text-center');
$('#warning-text').addClass('text-white');
document.getElementById('warning-text').innerHTML='Iniciando Sesión...';
},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log('Error'); })
.always(function() {
console.log("complete");
});
}
La idea es: Obtener las dos columnas de la consulta MySQL
mediante la funcion ajax()
y redireccionar según el valor de la columna rol (usuario o administrador). El problema es que el ajax no funciona.
<script src="js/ajax/ajaxlogin.js"></script>
y luego el archivo<script src="js/jquery-3.2.1.js"></script>
cuando esto es al reves, primero cargas tu archivo jquery y luego ya todo lo demasSucess
. Le puse unalert()
en la función fail y es lo que solo me está devolviendo, pero no me devuelve nada en el.done()
done
ofail
... si entra en elfail
no te puede entrar en eldone
. Significa que hay un problema, y casi siempre es el archivo PHP (el código)../../php/consultas.php
o la ruta del archivo.