Foros del Web » Programando para Internet » Jquery »

Login con ajax no me funciona.

Estas en el tema de Login con ajax no me funciona. en el foro de Jquery en Foros del Web. Buenos días gente del foro, he aquí mi post con una duda. Hace poco comencé con ajax (jquery ya lo manejaba en lo basico y ...
  #1 (permalink)  
Antiguo 10/06/2015, 08:38
 
Fecha de Ingreso: junio-2011
Mensajes: 42
Antigüedad: 13 años, 6 meses
Puntos: 0
Login con ajax no me funciona.

Buenos días gente del foro, he aquí mi post con una duda.
Hace poco comencé con ajax (jquery ya lo manejaba en lo basico y decidí aplicar la tecnica).

Les dejo el codigo abajo, el problema es que nunca me re direcciona a la pagina principal. Incluso si el usuario o contraseña están bien.
Luego de ingresar el usuario y contraseña correctamente me da error, me devuelve un 0 en vez de un 1. Pero si presiono F5 veo que la variable $_SESSION[logeado] esta correctamente cargada con el valor "tiene_permido".

Código:
<!doctype html>
<html lang="es">
    <head>
        
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<?php
session_start();


if(ISSET($_POST[puede_entrar2]))
{
    session_start();
    
    //==============================Tiene los datos de conexion==========
    include('Barra/conexion.php'); 
    
    // Usuario y Contraseña enviados
    $nick=$_POST['nick'];
    $clave=$_POST['clave'];
	
    $nick = stripslashes($nick);
    $clave = stripslashes($clave);
    $nick = mysql_real_escape_string($nick);
    $clave = mysql_real_escape_string($clave);

    $sql="SELECT * FROM usuarios WHERE nick='$nick' and clave='$clave'";
    $result=mysql_query($sql);

    // Cuenta los resultados de arriba
    $count=mysql_num_rows($result);

    ///////Busca los permisos que tiene el usuario

    if($count=='1')
    {
    
    $_SESSION['logeado']="tiene_permiso";
    $_SESSION['nick']=$nick;

    //Register $myusername, $mypassword and redirect to file "login_success.php"
    session_register("nick");
    session_register("clave");
    
    //=================la idea es que en success devuelva este valor
    echo 1,
    
    }
    else
    {    
        
    echo 0,    
        
    }

}   

//==============================Compruebo a mano si las variables se cargan, o si al menos llega a esta parte del IF
//=========================Si presiono F5 luego de logearme aparece el valor "tiene_permiso"
echo'<div id="resultado">';
echo "Variable:";
echo $_SESSION['logeado'];
echo "<br>";
echo "Nombr:";
echo $_SESSION['nick'];
echo'</div>';

?>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
	<title>Control - Inicio de sessión</title>
	<link rel="stylesheet" type="text/css" href="style.css"> 
	
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        
</head>

	
<div class="ingreso" id="rewesultado">
    <form name="accion"  >
	<p>Inicio de sessíon</p>
	<input id="nick" name="nick" type="text" autofocus  placeholder="Usuario" required title="Introduzca un monto">
<div id="escriba_nick">Por favor escriba su Nick</div>
	<br>
	<input id="clave" name="clave" type="password" placeholder="Contrase&ntilde;a" required>
<div id="escriba_pass">Por favor escriba su contraseña</div>
	<br>
<div id="error_ingreso">Usuario o Contraseña Incorrectos</div>
        <input name="accion" type="button" onclick="validar()" value="Ingresar" id="bt_ingresar">
    </form>	
</div>



<script type="text/javascript">
function validar(){
        if ($('#nick').val()=="")
            {
                $("#escriba_nick").slideDown("slow").delay( 1800 );
                $("#escriba_nick").slideUp("slow");
                $("#nick").focus();
            }
            else
            {
            if ($('#clave').val()=="")
                {
                    $("#escriba_pass").slideDown("slow").delay( 1800 );
                    $("#escriba_pass").slideUp("slow");
                    $("#clave").focus();
                }
                else
                {
                    mandar();
                }
            }
        }


function mandar(){
        var nick       = $('#nick').val();
        var clave      = $('#clave').val();
        var divResultado = document.getElementById('#mierda');
       
         $.ajax({
           url      :   "index.php",
           type     :   "POST",
           async    :   false,
           data     :{nick:nick,clave:clave,puede_entrar2:1},
           success  : function (resp)
                                        {
                                            if (resp == 1)
                                            {
                                                window.location="home.php";
                                                
                                            }
                                            else
                                            {
                                                $('#nick').val("");
                                                $('#clave').val("");
                                                $("#error_ingreso").slideDown("slow").delay( 3000 );  
                                                $("#error_ingreso").slideUp("slow");
                                                $("#bt_ingresar").val("Ingresar");
                                            }
                                        }
           
       });
    
    
    
    
}
</script>
No importa lo que haga siempre me termina apareciendo que el usuario y contraseña están mal.

Alguna idea? Desde ya muchas gracias como siempre.
  #2 (permalink)  
Antiguo 10/06/2015, 09:49
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 1 mes
Puntos: 977
Respuesta: Login con ajax no me funciona.

El nombre de la función de PHP que corrobora que se haya definido una determinada variable y que no sea nula es isset, en minúsculas. Sería mejor que los índices del array asociativo $_POST fueran entre comillas o —de lo contrario— pueden ser interpretados como constantes.

Por otro lado, no tiene sentido que dos veces inicies/recuperes una sesión (session_start()), con una vez basta. Aunque es sabido que PHP es un lenguaje de bajo tipado y siempre se obtendrá el valor numérico de un número entrecomillado (como si se tratara de una cadena), es preferible que en situaciones como en la que comparas el valor de $count con el 1, no uses las comillas. En ese caso, va a funcionar como se espera porque no se trata de una comparación con igualdad estricta, pero sería mejor que te acostumbres a tratar a los números como tal y no como cadenas cuando se trata de comparar cantidades.

Al final de cada línea debe de ir un punto y coma, no una coma, como veo que utilizas al imprimir al 1 y 0, respectivamente. Esas comas pueden ser interpretadas como operadores de concatenación.

Ahora, con respecto a tu código JavaScript, antes de realizar una petición asíncrona (Ajax), debes de saber que, para mandar a procesar los datos de un formulario sin que recargue la página, debes de cancelar la ejecución del evento submit, el cual se ejecuta cuando envías los datos del formulario para su procesamiento. Debes de utilizar el método .preventDefault() para evitar que eso ocurra y así puedas usar el método $.ajax sin que la página recargue.

Para que depures tu código, utiliza la consola del navegador para saber qué valor estás recibiendo en la variable resp del método success. Añade la línea console.log(resp) en dicho método y antes del bloque de decisión, pulsa la tecla F12 y, en el panel que se desplegará en tu navegador, selecciona la opción "Console" o "Consola" (según como se muestre en tu navegador). Ejecuta todo y podrás ver qué respuesta recibes.

Solo como consejo, trata de no tener código de diferentes lenguajes en el mismo archivo. Se vería más limpio si tuvieras aparte a tu archivo PHP para comprobar los datos, así como otro archivo para el código JavaScript, el cual incluirías mediante una etiqueta <script>.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 10/06/2015, 16:49
 
Fecha de Ingreso: junio-2011
Mensajes: 42
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Login con ajax no me funciona.

Muchísimas gracias por tan detallada explicación, hice muchas modificaciones y aplique todo lo que me comentaste.
No sabia lo del F12 aunque no me mostró nada cuando busque eso.

Archivo index.php
Código HTML:
Ver original
  1. <!doctype html>
  2. <html lang="es">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.     <title>Control - Inicio de sessión</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css">
  6.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  8.     <script src="/control/index.js"></script>
  9. </head>
  10.    
  11. <body> 
  12.     <div class="ingreso" id="rewesultado">
  13.        
  14.             <p>Inicio de sessíon</p>
  15.             <input id="nick" name="nick" type="text" autofocus  placeholder="Usuario" required title="Introduzca un monto">
  16.             <div id="escriba_nick">Por favor escriba su Nick</div>
  17.             <br>
  18.             <input id="clave" name="clave" type="password" placeholder="Contrase&ntilde;a" required>
  19.             <div id="escriba_pass">Por favor escriba su contraseña</div>
  20.             <br>
  21.             <div id="error_ingreso">Usuario o Contraseña Incorrectos</div>
  22.             <input type="button" onclick="validar()" value="Ingresar" id="bt_ingresar">
  23.        
  24.     </div>
  25.  
  26. </body>
  27. </html>





Archivo index.js
Código Javascript:
Ver original
  1. function validar(){
  2.         event.preventDefault();
  3.         if ($('#nick').val()=="")
  4.             {
  5.                 $("#escriba_nick").slideDown("slow").delay( 1800 );
  6.                 $("#escriba_nick").slideUp("slow");
  7.                 $("#nick").focus();
  8.             }
  9.             else
  10.             {
  11.             if ($('#clave').val()=="")
  12.                 {
  13.                     $("#escriba_pass").slideDown("slow").delay( 1800 );
  14.                     $("#escriba_pass").slideUp("slow");
  15.                     $("#clave").focus();
  16.                 }
  17.                 else
  18.                 {
  19.                     mandar();
  20.                 }
  21.             }
  22.         }
  23.  
  24. function mandar(){
  25.         event.preventDefault();
  26.         var nick       = $('#nick').val();
  27.         var clave      = $('#clave').val();
  28.         var divResultado = document.getElementById('#mierda');
  29.        
  30.          $.ajax({
  31.            url      :   "index_chequeo.php",
  32.            type     :   "POST",
  33.            data     :{nick:nick,clave:clave,puede_entrar:1},
  34.            success  : function(resp)
  35.                                         {
  36.                                             if (resp=='true')
  37.                                             {
  38.                                                 window.location="home.php";
  39.                                             }
  40.                                             else
  41.                                             {
  42.                                                 $('#nick').val("");
  43.                                                 $('#clave').val("");
  44.                                                 $("#error_ingreso").slideDown("slow").delay( 3000 );  
  45.                                                 $("#error_ingreso").slideUp("slow");
  46.                                                 $("#bt_ingresar").val("Ingresar");
  47.                                             }
  48.                                         }
  49.            
  50.        });
  51. }


Archivo index_chequeo.php
Código PHP:
Ver original
  1. <?php
  2. if(isset($_POST[puede_entrar])){
  3. include('Barra/conexion.php');
  4.  
  5. // Usuario y Contraseña enviados
  6. $nick=$_POST['nick'];
  7. $clave=$_POST['clave'];
  8.    
  9. // To protect MySQL injection (more detail about MySQL injection)
  10. $nick = stripslashes($nick);
  11. $clave = stripslashes($clave);
  12. $nick = mysql_real_escape_string($nick);
  13. $clave = mysql_real_escape_string($clave);
  14.  
  15. $sql="SELECT * FROM usuarios WHERE nick='$nick' and clave='$clave'";
  16. $result=mysql_query($sql);
  17.  
  18. // Cuenta los resultados de arriba
  19. $count=mysql_num_rows($result);
  20.  
  21. ///////Busca los permisos que tiene el usuario
  22.  
  23.  
  24. // If result matched $myusername and $mypassword, table row must be 1 row
  25. if($count==1)
  26. {
  27. $_SESSION['logeado']="sip";
  28. $_SESSION['nick']=$nick;
  29.  
  30. //Register $myusername, $mypassword and redirect to file "login_success.php"
  31.  
  32. echo 'true';
  33.  
  34. }
  35. else
  36. {
  37. echo 'false';
  38. }
  39. }
  40. ?>


De todas formas sigo con el mismo error :(
En los lugares dentro de Ajax que hay "," , si las cambio por ";" me da error.

Tambien vi con F12 puedo ver las variables que envió a través de java, esto no es peligroso? Es decir saben que hay un php que espera la variable tiene_permiso=1 para poder ingresar.
Muchas gracias nuevamente.
  #4 (permalink)  
Antiguo 10/06/2015, 17:21
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 1 mes
Puntos: 977
Respuesta: Login con ajax no me funciona.

Lo de las comas y puntos y comas lo decía por la parte en el archivo PHP en donde imprimes los valores 1 y 0, por eso fue que al inicio del cuarto párrafo dije: "Ahora, con respecto a tu código JavaScript...".

Sigues sin colocar las comillas al índice puede_entrar de $_POST.

De preferencia, utiliza un formulario que contenga a los elementos que muestras y un <input type = "submit" /> para enviar a procesar los valores del formulario y en el código JavaScript, haces esto:

Código Javascript:
Ver original
  1. $("#id del formulario").on("submit", function(event){
  2.     event.preventDefault();
  3.     //Acá irían los códigos de las funciones 'validar' y 'mandar', por lo que ya no las necesitarías
  4. });

Si después de hacer estos cambios sigues con el problema, prueba sin Ajax, para así determinar si el problema está al implementar Ajax o en otra parte.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 10/06/2015, 18:27
 
Fecha de Ingreso: junio-2011
Mensajes: 42
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Login con ajax no me funciona.

Gracias de nuevo por la super rápida respuesta.

Hice los ajustes que me pediste y detallo lo siguiente.
Si escribo user y pass no me funciona, pero si carga la variable "logueado", es decir que ajax funciona, ya que manda el usuario ,contraseña y la variable tiene_permiso. busca dentro de index_chequeo.php los datos y los confirma. Y si vuelvo a ingresar el mismo usuario y contraseña entro a la pagina.
En conclusión funciona ingresando dos veces el user y pass.
Pero si los escribo mal de primera, no me sale el cartel de error.
Hay un tema con el echo "true"; es como que la funcion success no funciona de primera, solo de segunda. imprime otra cosa que true, como por ejemplo false no le da bola al if(resp=="true")..

index.php
Código HTML:
Ver original
  1. <?php
  2. session_start();
  3. ?>
  4. <!doctype html>
  5. <html lang="es">
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.     <title>Control - Inicio de sessión</title>
  8.     <link rel="stylesheet" type="text/css" href="style.css">
  9.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  10.     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  11.     <script src="/control/index.js"></script>
  12. </head>
  13.    
  14. <body> 
  15.     <div class="ingreso" id="resultado" >
  16.         <form id="form_ingreso" onsubmit="return validar();" method="POST">
  17.             <p>Inicio de sessíon</p>
  18.             <input id="nick" name="nick" type="text" autofocus  placeholder="Usuario" required title="Introduzca un monto">
  19.             <div id="escriba_nick">Por favor escriba su Nick</div>
  20.             <br>
  21.             <input id="clave" name="clave" type="password" placeholder="Contrase&ntilde;a" required>
  22.             <div id="escriba_pass">Por favor escriba su contraseña</div>
  23.             <br>
  24.             <div id="error_ingreso">Usuario o Contraseña Incorrectos</div>
  25.             <input type="submit" value="Ingresar" id="bt_ingresar">
  26.         </form>
  27.     </div>
  28.  
  29. </body>
  30. </html>
  31.  
  32. <?php
  33. echo "Variable:";
  34. echo $_SESSION['logeado'];
  35. ?>

indes.js
Código Javascript:
Ver original
  1. function validar(){
  2.         //event.preventDefault();
  3.         if ($('#nick').val()=="")
  4.             {
  5.                 $("#escriba_nick").slideDown("slow").delay( 1800 );
  6.                 $("#escriba_nick").slideUp("slow");
  7.                 $("#nick").focus();
  8.             }
  9.             else
  10.             {
  11.             if ($('#clave').val()=="")
  12.                 {
  13.                     $("#escriba_pass").slideDown("slow").delay( 1800 );
  14.                     $("#escriba_pass").slideUp("slow");
  15.                     $("#clave").focus();
  16.                 }
  17.                 else
  18.                 {
  19.                     mandar();
  20.                 }
  21.             }
  22.         }
  23.  
  24. function mandar(){
  25.        
  26.         var nick       = $('#nick').val();
  27.         var clave      = $('#clave').val();
  28.         var divResultado = document.getElementById('#resultado');
  29.        
  30.          $.ajax({
  31.            url      :   "index_chequeo.php",
  32.            type     :   "POST",
  33.            data     :{nick:nick,clave:clave,puede_entrar:1},
  34.            success  : function(resp)
  35.                                         {
  36.                                             if (resp=='true')
  37.                                             {  
  38.                                                 $("#resultado").slideUp("fast");
  39.                                                 window.location="Principal.php";
  40.                                             }
  41.                                             else
  42.                                             {
  43.                                                 $('#nick').val("");
  44.                                                 $('#clave').val("");
  45.                                                 $("#error_ingreso").slideDown("slow").delay( 3000 );  
  46.                                                 $("#error_ingreso").slideUp("slow");
  47.                                                 $("#bt_ingresar").val("Ingresar");
  48.                                             }
  49.                                         }
  50.            
  51.        });
  52. }

index_chequeo.php
Código PHP:
Ver original
  1. <?php
  2. if(isset($_POST['puede_entrar'])){
  3. include('Barra/conexion.php');
  4.  
  5. // Usuario y Contraseña enviados
  6. $nick=$_POST['nick'];
  7. $clave=$_POST['clave'];
  8.    
  9. // To protect MySQL injection (more detail about MySQL injection)
  10. $nick = stripslashes($nick);
  11. $clave = stripslashes($clave);
  12. $nick = mysql_real_escape_string($nick);
  13. $clave = mysql_real_escape_string($clave);
  14.  
  15. $sql="SELECT * FROM usuarios WHERE nick='$nick' and clave='$clave'";
  16. $result=mysql_query($sql);
  17.  
  18. // Cuenta los resultados de arriba
  19. $count=mysql_num_rows($result);
  20.  
  21. ///////Busca los permisos que tiene el usuario
  22.  
  23.  
  24. // If result matched $myusername and $mypassword, table row must be 1 row
  25. if($count==1)
  26. {
  27. $_SESSION['logeado']="sip";
  28. $_SESSION['nick']=$nick;
  29.  
  30. //Register $myusername, $mypassword and redirect to file "login_success.php"
  31.  
  32. echo 'true';
  33.  
  34. }
  35. else
  36. {
  37. echo 'false';
  38. }
  39. }
  40. ?>

Como puedo hacerlo sin ajax? Antes lo tenia en php y html5, funcionaba bien, pero con el afan de aplicar ajax se me ocurrió empezar una nueva pagina desde cero y aplicando todo lo que aprendí.

Gracias de nuevo
  #6 (permalink)  
Antiguo 10/06/2015, 20:03
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 1 mes
Puntos: 977
Respuesta: Login con ajax no me funciona.

¿Por qué pones en la cabecera del formulario la línea onsubmit="return validar();" si ninguna de tus funciones devuelve un valor?

Hacerlo sin Ajax significa que simplemente no uses el método $.ajax ni la manera nativa de hacerlo. Solo usarías el formulario, tu función de validación y devolverías true o false si la validación fue exitosa o no.

La verdad, no entiendo por qué te complicas con algo tan sencillo. Un ejemplo simple con Ajax de algo similar a lo que pretendes hacer sería el siguiente:

Código HTML:
Ver original
  1. <form id = "login" method = "post" action = "procesar.php">
  2.     <label for = "usuario">Usuario:</label>
  3.     <input type = "text" name = "usuario" id = "usuario" required />
  4.  
  5.     <label for = "clave">Clave:</label>
  6.     <input type = "password" name = "clave" id = "clave" required />
  7.  
  8.     <input type = "submit" />
  9. </form>

Código Javascript:
Ver original
  1. $("#login").on("submit", function(event){
  2.     event.preventDefault();
  3.  
  4.     $.ajax({
  5.         url: $(this).prop("action"),
  6.         type: $(this).prop("method"),
  7.         data: $(this).serialize()
  8.     }).done(function(respuesta){
  9.         if (respuesta == "OK"){
  10.             $(location).prop("href", "principal.php");
  11.         }
  12.         else{
  13.             alert("Los datos ingresados no son correctos");
  14.         }
  15.     });
  16. });

Código PHP:
Ver original
  1.  
  2. $conexion = mysqli_connect('server', 'user', 'password', 'db_name');
  3.  
  4. if (!$conexion) exit('No se pudo conectar');
  5.  
  6. $usuario = mysqli_real_escape_string(strip_tags($_POST['usuario']);
  7. $clave= mysqli_real_escape_string(strip_tags($_POST['clave']);
  8. $consulta = "SELECT * FROM usuarios WHERE usuario = '$usuario' AND clave = '$clave'";
  9. $resultados = mysqli_query($conexion, $consulta) or exit('No se pudo realizar la consulta');
  10.  
  11. if (mysqli_num_rows($resultados)){
  12.     $_SESSION['identificado'] = true;
  13.     $_SESSION['usuario'] = $usuario;
  14.     echo 'OK';
  15. }
  16. else{
  17.     $_SESSION['identificado'] = false;
  18.     echo 'ERROR';
  19. }
  20.  
  21. mysqli_close($conexion);

Y en principal.php:
Código PHP:
Ver original
  1.  
  2. if ($_SESSION['identificado']){
  3.     //Muestras el contenido
  4. }

Toma este sencillo ejemplo como una guía para que hagas lo que necesitas.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 10/06/2015 a las 20:31 Razón: Olvidé la "session"

Etiquetas: ajax, login
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:18.