jQuery form authentication error

I'm trying out this basic authentication using jQuery. But nothing happens when I enter a wrong username/password -- no alert is displayed nor is the label error shown.

Using Firebug, in the Response header, it shows: Login failed{"success":false} but no error is displayed on the page itself.

Even if the username/password is correct, it doesn't redirect the page to successful login page.

HTML:

<section>
    <form id="form" name="form" action="login.php" method="post">  

    <ul>
        <li>
        <span class="er">&nbsp;Error Message</span>
        </li> <br />

        <li>
        <label for="name">Name</label>  
        <input type="text" name="name" id="name" required />       
        </li>

        <li> 
        <label for="pass">Password</label>  
        <input type="password" name="pass" id="pass" required/>  
        </li>

    </ul>
        <input type="submit" value="Log In" />  

</form>  
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(".er").hide();
        $('#form').bind('submit', function (e) {
            var self = $(this);

            // See ajax: http://api.jquery.com/jQuery.post
            // See serialize: http://api.jquery.com/serialize()
            jQuery.post(self.attr('action'), self.serialize(), function () {
                if (response.success) {
                    // wooo, logged in
                    window.location.href='home.php';
                } else {
                    $(".er").show();
                    alert("Invalid username or password. Please try again");
                }
            }, 'json');

            e.preventDefault(); //prevent the form being posted 
        });
});
</script>

PHP --login.php:

<?php
include "common/base.php";


include_once "inc/class.users.inc.php";
$users = new Admin($db);
if($users->accountLogin()==TRUE):
      echo 开发者_运维技巧"Login Successful " . $_SESSION['Username'];
      echo json_encode(array('success' => true));
      header("Location: home.php");
else:
     echo "Login failed";
     echo json_encode(array('success' => false));
endif;

?>

---

Nothing is happening because you are not defining response. Change what you have to:

jQuery.post(self.attr('action'), self.serialize(), function (response){

---

You're response variable needs to be a parameter of the success callback like so:

jQuery.post(self.attr('action'), self.serialize(), function (response) {
                if (response.success) {
                    // wooo, logged in
                    window.location.href='home.php';
                } else {
                    $(".er").show();
                    alert("Invalid username or password. Please try again");
                }
}, 'json');