用ajax问题登录

Question

I am trying to create on-page login.

without ajax it works very well. Here is my login.php;

if($_POST)
{
    $username =$_POST["username"];
    $password =$_POST["password"];
    $query  = $handler->query("SELECT * FROM members WHERE username='$username' && password='$password'",PDO::FETCH_ASSOC);
    if ( $say = $query -> rowCount() ){
        if( $say > 0 ){
            session_start();
            $_SESSION['session']=true;
            $_SESSION['username']=$username;
            $_SESSION['password']=$password;

            echo "ok";

        }else{
            echo "Couldn't login.";
        }
    }else{
        echo "Wrong username or password.";
    }
}

Anyway, here is my java script code;

            $(function(){
             $("#loginbutton").click(function(){
                var username = $("#username").val();
                var password = $("#password").val();
                if(username != "" && password != ""){
                    $.ajax("login.php",{
                        type : "POST",
                        data : "username="+username+"&password="+password,
                        success : function(data){
                            if(data == "ok"){
                                                    $("#message").html(data);
                            }else{
                                $("#fail").fadeIn();
                            }
                        }
                    });
                }
             });
            });

Even though I put correct login information (when I get "ok" response from login.php, it always outputs $("#fail").fadeIn(); . instead of $("#message").html(data); I couldn't figure out where I am mistaken.

and here is login form:

    <div id="login">    

       <form action="" onsubmit="return false;" method="post">

            <input type="text" class="form-control" id="username" name="username" placeholder="Username" autocomplete="off"><br>

            <input type="password" class="form-control" id="password" name="password" placeholder="Password" autocomplete="off"><br> 

            <input class="btn btn-success" type="submit" id="loginbutton" value="Login">

       </form>

            <div id="message">  </div>
            <div id="fail" style="display: none;">failed.</div> 

    </div>

Answer 1

You are using type as post, but sending parameters as get.Change your ajax like this,

$.ajax("login.php",{
    type : "POST",
    data : {username:username,password:password},// only this line is changed.
    success : function(data){
        if(data == "ok"){
            $("#message").html(data);
       }else{
           $("#fail").fadeIn();
    }
}
});