Cómo hacer una solicitud de Ajax para iniciar sesión

Question

Tengo esto en mi código PHP, y actualmente hace la solicitud de inicio de sesión en la misma página login.php pero ahora quiero hacerlo con Ajax. Básicamente tengo esto en el login.php

 echo '<form method="post" ><div id="login" class="login"> 
     <label for="login">User Name</label> 
     <input type="text" name="logInUsername" /> 
     <label for="Password">Password</label> 
     <input type="password" name="logInPassword" /> 
     <input type="submit" value="Submit" name="submitlogin" class="button" /> 
     </div>'; 

me gustaría utilizar esta todavía pero tienen un login_request.php o algo donde puedo enviar el nombre de usuario y contraseña validado y luego cambiar el <div id=login> to say you are logged in!</div> puedo hacerlo de la de manera convencional, con la publicación de formulario ... pero ahora me gustaría probarlo con Ajax.

Cualquier ayuda será muy apreciada.

Saludos

Answer 1

¿Qué has intentado hasta ahora? Así es como me gustaría empezar:

Esto debería empezar:

HTML:

<form id="loginForm"> 
    <div id="login" class="login"> 
     <label for="login">User Name</label> 
     <input type="text" name="logInUsername" /> 
     <label for="Password">Password</label> 
     <input type="password" name="logInPassword" /> 
     <input type="button" value="Submit" id="submitlogin" class="button" /> 
    </div> 
</form> 

jQuery:

$("#submitlogin").click(function() { 
    inputs = //grab then inputs of your form #loginform 
    $.ajax ({ 
     url: "urltoyourloginphp.php", 
     data: inputs, 
     success: function() { 
     $("#login").html("You are now logged in!"); 
    } 
    }); 
}) 

Answer 2

escribí esto hace un tiempo, que no es un buen inicio de sesión ajax completa (es decir, al final lo hace todavía le redirigir), pero puede servir de base para un inicio de sesión ajax completa. Como ventaja, en realidad no necesitas https (ese era el objetivo de este pequeño proyecto).

https://github.com/eberle1080/secure_http_login/blob/master/login.php

Los pasos de alto nivel más o menos así:

• pedir al servidor para un valor de la semilla (una sal) mediante una solicitud Ajax
• hash de la contraseña + semilla usando un sha1 sum
• Pídale al servidor que verifique el nombre de usuario y la contraseña salada + hash
• Si es válida, el servidor establece una cookie de sesión que indica que el el usuario se registra en
• El servidor responde a la solicitud Ajax con un éxito/fracaso mensaje

Answer 3

jQuery ha construido en .post() y .serialize() métodos para completar un formulario.

$.post("login.php", $("#loginForm").serialize(), function(data) { 
    //pass information back in with data. if it's JSON, use $.parseJSON() to parse it. 
    alert('either logged in or errored'); 
); 

También tendrá que modificar su forma por lo que tiene un id, como: <form id="loginForm">...

Answer 4

No sé PHP, pero le dará un ejemplo de la forma en que lo habría hecho con VBScript (ASP clásico) por lo que puede intentar adaptarlo a PHP según sea necesario.

Yo, en mis aplicaciones, no uso la etiqueta de formulario desde que utilicé ajax por primera vez. Entonces, aquí vamos:

login html page: 

include jquery 
<script type='text/javascript' src='your-jquery-url'></script> 
<script type='text/javascript'> 

    function tryLogin() { 
     var inputs='userName='+$('logInUsername').val()+ 
        '&userPassw='+$('logInPassword').val(); 
     //notice that I changed your name= to id= in the form 
     //notice the '&' in the '&userPassw= 
     $.post('your-login-validation-page',inputs,function(data) { 
      eval('var json='+data); 
      if (json['success'] == 'true') { 
       $('#loginForm').html('<p>Congratulations! You\'ve been logged in successfully</p>') 
      } else { 
       alert(json['errorMessage']); 
       $('#logInUsername').focus(); 
      } 
     }); 
    } 

</script> 

<div id='loginForm' > 
    <label for="login">User Name</label> 
    <input type="text" id="logInUsername" /> 
    <label for="Password">Password</label> 
    <input type="password" id="logInPassword" /> 
    <button onClick='tryLogin(); ' >LOGIN</button> 
</div> 



login-validation-page 

[in vbscript] 

user = request.Form("userName") 
passw = request.Form("userPassw") 

"if is there this user"  (coded as if there was a database look up...) 
    "if the password = passw" (coded as comparing the values) 
     response.write "{'sucess':'true'}" 
    else 
     response.write "{'success':'false','errorMessage':'wrong password'}" 
    end if 
else 
    response.write "{'success':'false','errorMessage':'user not found'}" 
end if 

---> end of login-validation-page