Come effettuare una richiesta Ajax per il login

Question

Ho questo nel mio codice PHP, e attualmente fa la richiesta di login nella stessa pagina login.php ma ora voglio farlo con Ajax. Fondamentalmente ho questo nel 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>'; 

Vorrei utilizzare ancora questo, ma hanno un login_request.php o qualcosa in cui posso inviare il nome utente e la password convalidato e quindi modificare il <div id=login> to say you are logged in!</div> posso farlo nel modo convenzionale, con il modulo post .. ma ora mi piacerebbe provarlo con Ajax.

Qualsiasi aiuto sarà molto apprezzato.

saluti

Answer 1

Cosa hai provato finora? Questo è come vorrei iniziare:

Questo dovrebbe iniziare:

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

Ho scritto questo qualche tempo fa, non è un bel login completa ajax (vale a dire, alla fine lo fa ancora favore usare), ma può servire come base per un accesso completo ajax. Come plus, in realtà non hai bisogno di https (questo era il punto centrale di questo piccolo progetto).

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

I passaggi di alto livello più o meno così:

• richiedere al server per un valore di seme (un sale) utilizzando una richiesta Ajax
• hash della password + seme utilizzando uno SHA1 somma
• Chiedi al server di verificare il nome utente e la password salata + con l'hash
• Se è valido, il server imposta un cookie di sessione che indica che il utente è connesso in
• Il server risponde alla richiesta Ajax con un successo/fail messaggio

Answer 3

jQuery ha costruito in .post() e .serialize() metodi per avvolgere un modulo.

$.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'); 
); 

Sarà inoltre necessario modificare il modulo in modo che abbia un id, come: <form id="loginForm">...

Answer 4

Non so PHP, ma vi darò un esempio di come avrei fatto con VBScript (asp classico) in modo che tu possa provare ad adattarlo a PHP, se necessario.

Io, nelle mie applicazioni, non uso il tag form da quando ho usato ajax per la prima volta. Così, qui andiamo:

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