Ajax and php - login script

Question

I'm trying to do a login page, but I have an issue wit ajax method:

 $("#login").click(function(){

        username=$("#user_name").val();
        password=$("#password").val();
         $.ajax({
            type: "POST",
            url: "login.php",
            data: {name : username, pwd : password},
            success: function(html){
              if( ($.trim(html)) =='true')
              {
                $("#login_form").fadeOut("normal");
                        $("#shadow").fadeOut();
                        $("#profile").html("<a href='logout.php' id='logout'>Logout</a>");

              }
              else
              {
                    $("#add_err").html("Wrong username or password");
              }
            },
            beforeSend:function()
                {
                 $("#add_err").html("Loading...")
            }
        });
         return false;
    });

login.php:

<?php  

 session_start();

 $username = $_POST['name'];
 //$username = $mysqli->real_escape_string($username);
 $password = ($_POST['pwd']);
 //$password = $mysqli->real_escape_string($password);

 $mysqli = mysqli_connect('localhost','root','','peer');
 $query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
 $result = mysqli_query($mysqli,$query)or die(mysqli_error());
 $num_row = mysqli_num_rows($result);
 $row=mysqli_fetch_array($result);
 if( $num_row >=1 ) {
  echo 'true';
  $_SESSION['user_name']=$row['username'];
 }
 else{
 echo 'false';
 }
?>

I'm posting to login.php username and password, but obviously get nothing back, when I tried execute only php script it works correct. A html object seems like is still false . Do you see any mistake here ??

thanks

EDIT!

Answer 1

These are the issues I see here

• your data mat not be properly encoded. Instead of data: "name="+username+"&pwd="+password, use data:{name:username,pwd:password} so that jQuery will properly encode it for you.
• you response may have leading or trailing white spaces, so try if($.trim(html)=='true')
• always validate/sanitize input, you should use parameterized prepared statements , or at least escape the fields.

Answer 2

Try this:

$("#add_err").html("Loading...");
$.post('login.php',
    {'username': username, 'pwd': password},
    function(html){
        $("#login_form").fadeOut("normal");
        $("#shadow").fadeOut();
        $("#profile").html("<a href='logout.php' id='logout'>Logout</a>");
    }
);

@Musa pointed out that you shouldn't pass POST variables with

"name="+username+"&pwd="+password, use data:{name:username,pwd:password}

and he's 100% correct.

Another trick that might help is to use:

console.log(variable);

Whatever variable you pass will be returned to the console. You can view the console by pressing F12 in whatever browser your using. You could pass username and password before the ajax call is made, that way you can see if you're actually getting the user's input. You could also console.log the html variable, that would show if you're getting a response from the server.