1

Hice un login el cual estaba funcionando bien, el problema empezó cuando quise usar AJAX (el cual aun no sé manejarlo bien) para que mostrara un alert en caso de que el usuario o contraseña sea incorrecto.

Estos alert los realiza, sin embargo, cuando los datos ingresados son correctos debería direccionar a otra página, pero el contenido de esa página la muestra debajo del formulario del login. ¿Qué debo hacer para que direccione de manera normal?

Este es el archivo con el login y AJAX (index.php)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/alertify/alertify.css">
    <link rel="stylesheet" href="css/alertify/default.css">
    <script src="js/jquery.js"></script>
    <script src="js/alertify.js">   </script>

</head>

<body id="fondologin">

    <script type="text/javascript">
    $(document).ready(function(){
        $("#login").bind("submit",function(){
            var btnEnviar=$("#btnEnviar");
            $.ajax({
                type: $(this).attr("method"),
                url: $(this).attr("action"),
                data: $(this).serialize(),
                beforeSend: function(){
                    btnEnviar.val("Iniciar sesión");
                    btnEnviar.removeAttr("disabled");
                },
                success: function(data){
                    $("#datosvalidados").html(data);
                },
                error: function(data){
                    alert("Problem< en el envio de los datos");
                }
            });
            return false;
        });
    });
</script>
    <form id="login" action="login.php" method="POST" autocomplete="off">

            <h2>Ingresa tus datos</h2>

        <input type="text" name="user" placeholder="&#128373;Nombre de usuario"/>
        <input type="password" name="pass" placeholder="&#128272;Contraseña"/>
    <input type="submit" id="btnEnviar"name="login" value="Iniciar sesión"/>

    <a href="registrarse.php">Crear cuenta</a>
    <div id="datosvalidados">   </div>
    </form>
</body>
</html>

Este es el php que realiza la consulta (login.php)

   <link rel="stylesheet" href="css/alertify/alertify.css">
  <link rel="stylesheet" href="css/alertify/default.css">
  <script src="js/jquery.js"></script>
  <script src="js/alertify.js"> </script>
<?php
  require("config.php");
session_start();
  try {
  $usuario=htmlentities(addslashes($_POST['user']));
  $password=htmlentities(addslashes($_POST['pass']));


  $conexion = new PDO ("mysql:host=$host; dbname=$dblogin", "$dbusuario", "$contrasenadb");
  $conexion->setAttribute (PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $sql= "SELECT * FROM cuentas where usuario= :user";
  $resultado=$conexion->prepare($sql);
  $resultado->execute(array(":user"=>$usuario));
$registro=$resultado->fetch(PDO::FETCH_ASSOC);

if ($registro) { //Retorna TRUE en caso de encontrar datos referentes al USUARIO
         if (password_verify($password,$registro['contrasena'])) {//Validamos que coincidan las Contraseñas

            if ($registro['tipo_cuenta'] == 'Administrador') {//Validamos los Tipos de Cuenta del Usuario

                $_SESSION['usuario'] = $usuario;
                header("Location:administrador.php");

            } else if($registro['tipo_cuenta'] == 'Usuario'){

                $_SESSION['usuario'] = $usuario;
                header("Location:usuario.php");
            }

         } else {
            echo " <script >
  $(document).ready(function(){

    alertify.alert('Contraseña incorreta.');

  });
</script>";
         }

} else {

   echo " <script >
  $(document).ready(function(){

    alertify.alert('El usuario no existe');

  });
</script>";
}

  } catch (Exception $e) {
    die(" Error: " . $e->getMessage());
  }
2
  • 1
    Podrías estructurar mejor la pregunta y darle formato a tu código para poder replicarlo.
    – A. Palacio
    Commented el 16 jun. 2018 a las 18:09
  • Ya se realizó la correción. No entiendo por qué cuando uso la opción para insertar código no logra insertarlo todo y hay partes que no se muestra. Bueno, por si aún queda dudas con lo que necesito. Es que solo necesito el AJAX para que muestre los alert de contraseña o usuario incorrecto, pero de ser correcto que me direccione a otra página, no que me muestre esa página debajo de login.
    – jaoc6
    Commented el 16 jun. 2018 a las 19:43

2 respuestas 2

1

Conceptos:

ajax es una petición al servidor, el servidor devuelve información (error, json, html, texto, imágenes, una página completa, nada).

enviar un formulario también es una petición al servidor, aquí también el servidor puede devolver cualquier cosa (generalmente uno le dice que cosa) y esta cosa por lo general es una nueva página.

la petición ajax la maneja javascript y es javascript el que decide que hacer con eso (hay que programarlo)

la petición del form la maneja el navegador (en condiciones normales si no estamos interceptando nada aquí con javascript) y por lo general la acción es reemplazar la página actual con la que se recibe.

Código actual:

index.php (dentro del evento success del ajax)

 success: function(data){
    $("#datosvalidados").html(data);
 },

aquí le estás diciendo al javascript que lo que recibe lo ponga dentro de un div.

login.php ( una vez validado user y pass )

    $_SESSION['usuario'] = $usuario;
    header("Location:administrador.php");

aquí estás retornando la página administrador.php (lo mismo para el rol user)

Así que es normal que te cargue la página dentro del div.

Para lograr un login con ajax (o mostrar error en caso de que haya uno) hay que controlar qué es lo que le devolvemos al ajax, y decirle qué hacer con eso. En este caso enviaremos un json con 3 campos:

status   : "OK" ó "ERR"
Location : "unapágina.php" será la página a la que redireccionaremos
mensaje  : "un mensaje" será lo que se muestre en el DIV

Y cambiamos la forma en que devuelve cosas el php: (sólo login con ajax)

login.php

<?php

if (empty($_POST['user'])) {
  header("Location:index.php");
  // si no hay user por post vuelva al index
  // (no cargamos estilos ni retornamos html)
} else {
  require("config.php");
  session_start();
  try {
    $usuario=htmlentities(addslashes($_POST['user']));
    $password=htmlentities(addslashes($_POST['pass']));

    $conexion = new PDO ("mysql:host=$host; dbname=$dblogin", "$dbusuario", "$contrasenadb");
    $conexion->setAttribute (PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql= "SELECT * FROM cuentas where usuario= :user";
    $resultado=$conexion->prepare($sql);
    $resultado->execute(array(":user"=>$usuario));
    $registro=$resultado->fetch(PDO::FETCH_ASSOC);

    // NO damos pistas si el usuario existe o la contraseña fue incorrecta

    if ($registro && password_verify($password,$registro['contrasena'])) {
      //Validamos que coincidan las Contraseñas

      if ($registro['tipo_cuenta'] == 'Administrador') {
        //Validamos los Tipos de Cuenta del Usuario
        $_SESSION['usuario'] = $usuario;

        exit(json_encode(
          ["status"=>"OK",
           "Location"=>"administrador.php", 
           "mensaje"=>"cargando página admin"]
        ));

      } else if($registro['tipo_cuenta'] == 'Usuario'){
        $_SESSION['usuario'] = $usuario;

        exit(json_encode(
          ["status"=>"OK",
           "Location"=>"usuario.php", 
           "mensaje"=>"cargando página user"]
        ));
      }

    } else {

      exit(json_encode(
        ["status"=>"ERR",
         "Location"=>"index.php", 
         "mensaje"=>"no te reconozco"]
      ));
      // NO damos pistas si el usuario existe o la contraseña fue incorrecta

    }
  } catch (Exception $e) {
    // die(" Error: " . $e->getMessage());
    // si falló la DB nos daremos latigazos puertas adentro, 
    // el público no debe saberlo

    exit(json_encode(
      ["status"=>"ERR",
       "Location"=>"index.php", 
       "mensaje"=>"sistema no disponible intente mas tarde"]
    ));

  }
} 

index.php (pego sólo el javascript, el resto queda igual)

<script type="text/javascript">
$(function(){
  $("#login").bind("submit",function(){
    var btnEnviar=$("#btnEnviar");
    $.ajax({
      type: $(this).attr("method"),
      url: $(this).attr("action"),
      data: $(this).serialize(),
      beforeSend: function(){
        btnEnviar.val("Iniciar sesión");
        btnEnviar.removeAttr("disabled");
      },
      success: function(data){
        var respuesta = JSON.parse(data);

        $("#datosvalidados").html(respuesta.mensaje);
        // mostramos el mensaje 

        if ("OK"==respuesta.status) {
          // en realidad con el error tambien damos un Location (index.php), 
          // pero por el momento sólo redireccionamos si todo OK
          window.location.assign(respuesta.Location);
        }
      },
      error: function(data){
        // consistencia en los errores de UI
        $("#datosvalidados").html("sistema no disponible intente mas tarde");
      }
    });
    return false;
  });
});
</script>

como segunda opción: mantenes el login.php que tenes y agregas un nuevo login_ajax.php con el código php provisto, y cambias el action del form o el url: del $.ajax con el nombre del nuevo php que maneja el login ajax.

0

Lo que hace es correcto.

$("#datosvalidados").html(data);

Esto significa:

  • $("#datosvalidados") Buscar el elemento con id datosValidados.

  • En ese elemento, meterle como HTM el contenido de data.

Ese elemento es un div que tienes debajo del form.

Si quieres usar ese método con toda la página, deberías usar $("#fondologin").html(data)

3
  • Gracias por comentar SJuan76. Al modificar lo que me dices, no direcciona totalmente a la pagina administrador.php o usuario.php según sea el caso, muestra el contenido en el mismo index.php como antes, solo que ahora no dentro del login, éste desapece. Y si son incorrectos los datos suministrados, muestra los alert, desaperece el login y hay que actualizar la página para que vuelva a aparecer.
    – jaoc6
    Commented el 16 jun. 2018 a las 20:00
  • 1
    Pero es que lo que haces no tiene nada que ver con "redireccionar". Tu función reemplaza el contenido de un elemento web. Si quieres redireccionar de verdad, mira las dos primeras soluciones de stackoverflow.com/questions/503093/…
    – SJuan76
    Commented el 16 jun. 2018 a las 20:55
  • Gracias por la sugerencia @SJuan76 , resolvió mi problema. Solo sustituí los header("location:") por echo "<script> window.location='pagina.php'; </script>"; y funcionó como esperaba.
    – jaoc6
    Commented el 16 jun. 2018 a las 23:14

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.