1
  • Carpeta contenedora:
    • Carpeta js
      • Sub-Carpeta ajax
        • Archivo JS ajaxlogin.js
    • Carpeta php
      • Archivo PHP consultas.PHP
    • Archivo HTML index.html

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.

5
  • has revisado la consola o el network ? te saca algún error ? Commented el 7 nov. 2017 a las 20:53
  • Que error te marca o cual es el problema?
    – Sr1871
    Commented el 7 nov. 2017 a las 20:58
  • Lo mismo que te comenta camilo, checa la consola de tu navegador web para ver que te arroja la petición AJAX con Control + Shift + i , y veo que cargas primero tu archivo <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 demas Commented el 7 nov. 2017 a las 21:02
  • No recibe el Sucess. Le puse un alert() en la función fail y es lo que solo me está devolviendo, pero no me devuelve nada en el .done() Commented el 7 nov. 2017 a las 21:15
  • A ver o done o fail... si entra en el fail no te puede entrar en el done. Significa que hay un problema, y casi siempre es el archivo PHP (el código) ../../php/consultas.php o la ruta del archivo.
    – A. Cedano
    Commented el 7 nov. 2017 a las 23:00

1 respuesta 1

1

He probado tu código y está casi bien, salvo unas pequeñas cosas:

El done necesita recibir el parámetro de lo que obtiene del servidor:

.done(function(data) {  ...

y puedes hacer una prueba de lo que está devolviendo:

console.log(data);

La función ajaxLogin quedaría así:

function ajaxLogin(usuario,password){
alert('Entraste al ajax');

$.ajax({
    url: 'ok.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(data) {
    console.log(data);
})
.fail(function() {
    console.log('Error');   })
.always(function() {
    console.log("complete");
});


}

Notas:

Para que esto funcione me aseguré de que:

  • El archivo PHP que llama ajax funciona adecuadamente
  • La ruta de dicho archivo es correcta
  • La librería jQuery está debidamente cargada

Yo pondría todas mis funciones jQuery dentro de function, para que no intenten correr antes de que el DOM esté listo.

3
  • bien jugado mi estimado, eres grande bro :D
    – fredyfx
    Commented el 7 nov. 2017 a las 23:22
  • @A.Cedano Excelente, ha sido de gran utilidad, muchas gracias por el aporte. Commented el 8 nov. 2017 a las 2:27
  • Aparte de todo eso, creo que también tuvo que ver la ruta del archivo consultas.php de manera relativa no me encontraba el archivo. Commented el 8 nov. 2017 a las 2:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.