Return http response code from PHP to AJAX

Question

I am trying to make a login page for a website. I have a function that uses AJAX to send a request to a PHP script to check if the proper username and password has been entered in. I send http_response_code(200) if the the query returns a successful result, otherwise I send http_response_code(403). However, the login function seems to not return any response status. The response seems to be undefined. In this case, the function gives me the window alert for the wrong password or username even if the correct password and username is entered. What condition should I be checking to determine what the success function should do based on the http response code? Is there another way to return a condition to AJAX based on what the PHP script does?

Here it the code for the login function.

function login(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var dataString = 'username1=' + username + '&password1=' + password;
if (username == '' || login == ''){
    window.alert("Please fill in username or password.");
}
else{
    $.ajax({
        type: "POST",
        url: "login.php",
        data: dataString,
        cache: false,
        crossDomain : true,
        success: function(response) {
            if (response.status == 200) {
                window.location = 'http://localhost/site.html';
            }
            else {
                window.alert("The password or username you have entered is not valid");
            }
        }
    });
}        
return false;

}

Here is my php script.

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
$password2 = $_POST['password1'];
$username2 = $_POST['username1'];
$connection = mysqli_connect("localhost", "root", "password", "database") or die("Unable to connect to MySQL");  
$query = mysqli_query($connection, "SELECT * FROM users where username = '$username2' AND password = '$password2'") or die(mysqli_error($connection));
$row = mysqli_fetch_array($query, MYSQLI_BOTH) or die(mysqli_error($connection));
if(!empty($row['username']) AND !empty($row['password'])) {
    session_start();
    $_SESSION['username'] = $username2;
    http_response_code(200);
    echo "Successful Login";
    exit;
}
else{
    http_response_code(403);
    echo "The password or username you have entered is not valid";
}
mysqli_close($connection);
?>

Please use PDO or something that does prepared statements for you. You're code is vulnerable to SQL injection. — Spechal
– Spechal, Commented Apr 2, 2018 at 2:16
response is not an object/array... That's not how you would check the response.status — sam
– sam, Commented Apr 2, 2018 at 2:17
change var dataString = 'username1=' + username + '&password1=' + password; to var dataString = {username1 : username,password1:password}; — Barclick Flores Velasquez
– Barclick Flores Velasquez, Commented Apr 2, 2018 at 2:17
I don't think a 403 response will ever trigger ajax's success function and you had better add a fail handler, or look at the statusCode property to build custom handlers for various response codes. — James
– James, Commented Apr 2, 2018 at 2:28

sam · Accepted Answer · 2018-04-02 02:24:28Z

5

When you check for the response and send the get response.status you do do not actually have an array or object as a response in your hands:

So when checking for the login you can create an array with status and a message and json_encode() it so you javascript code can pick it up and read it.

<?php
// fix your query connection - you are currently vulnerable. It does go outside of the scope of your question so I am not going to tackle it here.
if(!empty($row['username']) AND !empty($row['password'])) {
    session_start();
    $_SESSION['username'] = $username2;
    $return = array(
        'status' => 200,
        'message' => "Login Successful."
    );
    http_response_code(200);
}
else{
    $return = array(
        'status' => 403,
        'message' => "Login attempt denied."
    );
    http_response_code(403);
}
print_r(json_encode($return));

Now you can get the response back in your AJAX function:

    success: function(response) {
        var data = $.parseJSON(response);
        if (data.status == 200) {
            window.location = 'http://localhost/site.html';
        }
        else {
            window.alert(data.message);
        }
    }

answered Apr 2, 2018 at 2:24

sam

3,0043 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

peeter Over a year ago

I get the response status code 403 only when I add exit: or die() after http_response_code(403); Otherwise (as I'm inspecting the Network tab) I see the status code is still: Status Code: 200 OK

yaakov · Accepted Answer · 2018-04-02 02:25:22Z

0

The response argument that you are using in the success function is the returned data from the AJAX call, not the status and/or headers. You can get a string describing the status by getting the second argument to the function:

$.ajax({
  ...
  success: function(data, status){
    if(status == "success"){
      // success code.
    }
  }
});

View the jQuery.ajax docs for more information.

answered Apr 2, 2018 at 2:25

yaakov

4,7274 gold badges29 silver badges55 bronze badges

Collectives™ on Stack Overflow

Return http response code from PHP to AJAX

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related