Ajax Post request not working

Question

Hello I have created a script for login using ajax method I tried but this is not working for me getting unsuccessful can you please let me know why i am unable to work with this

function login() {
var username = document.getElementById('username').value;
var pass     = document.getElementById('pass').value;

if(username == '' && pass == '') {
    alert('Fields could not be left empty');
} else {
    $.ajax({
        type     : "POST",
        url      : "includes/register.php",
        data     : "command=login&username="+username+"&password="+pass,
        datatype : "json",
        success  :  function(data) {
            if (data.status == 200) {
                alert('Successfull');
                var return_data = data.responseText;
                document.getElementById('messagearea').innerHTML = return_data;
            } else {
                alert('Unsuccessful');
            }
        }
    });
}
}

it should run alert successful but I am getting alert('Unsuccessful') it means that status is not equal 200 can anyone help me out with that

Here is my php code

if(isset($_POST['command']) && $_POST['command'] == 'login') {
    $username = $_POST['username'];
    $pass     = $_POST['pass'];
    $password = md5($pass);

    $check  = mysqli_query($connection, "SELECT * FROM users WHERE username = '$username'");
    $result = mysqli_num_rows($check);
    if($result != 1) {
        echo "<div class='message'>Response Successful</div>";
    } else {
        echo "<div class='message'>Username/Password did not matched</div>";
    }
}

Answer 1

T in datatype should be capital,

$.ajax({
      type: "POST",
      url: "includes/register.php",
      data: "command=login&username=" + username + "&password=" + pass,
      dataType: "json",

As per the server code, your data should be look like this

data: "command=login&username=" + username + "&pass=" + pass,

change the code inside the success handler like this,

document.getElementById('messagearea').innerHTML = data;

Answer 2

If you want to check xhr request status you should use 3 parameter in success function .

success  :  function(data,text,xhr) {
            if (xhr.status == 200) {
                alert('Successfull');
                var return_data = data;
                document.getElementById('messagearea').innerHTML = return_data;
            } else {
                alert('Unsuccessful');
            }
        }

for dataType:"json"

if(isset($_POST['command']) && $_POST['command'] == 'login') {
    $username = $_POST['username'];
    $pass     = $_POST['pass'];
    $password = md5($pass);

    $check  = mysqli_query($connection, "SELECT * FROM users WHERE username = '$username'");
    $result = mysqli_num_rows($check);
    if($result != 1) {
        echo json_encode("<div class='message'>Response Successful</div>");
    } else {
        echo json_encode("<div class='message'>Username/Password did not matched</div>");
    }
}

Answer 3

You can try this solution:

$.ajax({
    type: "POST",
    url: "includes/register.php",
    data: {command: "login", username: username, password: pwd},
    dataType: "json",

Don't use "pass" into scripts jQuery, because sometimes it doesn't work properly.

Bye! :D

Answer 4

You need to add two more object in your ajax success function which will help you get more information of the request.

$.ajax({
    type     : "POST",
    url      : "register.php",
    data     : "command=login&username="+username+"&password="+pass,
    datatype : "json",
    success  :  function(data,xhr,req) {
        if (req.status == 200) {
            alert('Successfull');
            var return_data = data.responseText;
            document.getElementById('messagearea').innerHTML = return_data;
        } else {
            alert('Unsuccessful');
        }
    }
});

Also you need encode your return data into JSON so that your request return type match to JSON. If you closely look at your ajax request through Developer tool baar you will see that there are two more object return with your request containing different things.

1. Contains Data
2. Contains Request is success or failed.
3. Contains different objects in array