如何进行ajax登录请求

Question

I have this in my PHP code, and it currently does the login request in the same login.php page but now i want to do it with Ajax. Basically I have this in the 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 like to still use this but have a login_request.php or something where i can send the username and password validated and then change the <div id=login> to say you are logged in!</div> I can do it the conventional way, with the form post .. but now I would like to try it with Ajax.

Any help will be much appreciated.

Regards

Answer 1

What have you tried so far? This is how I would start:

This should get you started:

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!");
    }
  });
})