How to make ajax request to login

Question

I have this in my PHP code and it is currently executing a login request in the same login.php page, but now I want to do this with Ajax. I basically have this in 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>'; 

I would still use this, but had login_request.php or something where I can send the username and password and then change <div id=login> to say you are logged in!</div> . I can do it the usual way, with a form post .., but now I would like to try it using Ajax.

Any help would be greatly appreciated.

Hi

Answer 1

What have you tried? Here's how I get started:

This should help you:

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

I wrote this a while ago, this is not a complete ajax login (i.e. at the end it still redirects you), but it can serve as the basis for a full login to ajax system. As a plus, you really don't need https (that’s what this whole small project is about).

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

High-level steps look something like this:

• Request server for seed value (salt) using ajax request
• Hash password + seed using sha1 sum
• Ask the server to verify the username and salty + hashed password
• If it is valid, the server sets a session cookie indicating that the user is registered
• Server responding to ajax request with success / failure message

Answer 3

jQuery has built-in methods .post () and .serialize () to package the form.

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

You will also need to edit the form so that it has an identifier, for example: <form id="loginForm">...

Answer 4

I do not know PHP, but I will give you an example of how I would do it with vbscript (classic asp), so you can try to adapt it to PHP as needed.

In my applications, I do not use the form tag since I used ajax first. So here we go:

 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