Handling ajax response exceptions

Question

I am currently handling a form with php and calling it via an ajax request, i want to handle exceptions showing a small div instead of the basic popup so i did multiple if conditions based on the responsetext, however one of the exceptions doesnt get handled This exception is the empty fields exception it always shows the wrong username or pw instead

here is the ajax call

function sendLogin(){
    username = $('#loginEmail').val();
    password = $('#loginPassword').val();
    a = $.ajax({
        type: 'post',
        data: 'username='+username+'&password='+password,
        url: '/account/login.php',
        async: false,
    });

    if(a.responseText == "LoggedIn"){
        $("#WrongPW_Error").fadeOut("fast");
        $("#Empty_Error").fadeOut("fast");
        $("#LoggedIn").fadeIn("fast");
        setTimeout(location.reload(),2200);
     }
        else if(a.responseText == "Empty_Fields") {
          //alert(a.responseText);
          $("#WrongPW_Error").fadeOut("fast");
          $("#Empty_Error").fadeIn("fast");
     }
        else if(a.responseText == "Wrong_Credentials") {
          //alert(a.responseText);
          $("#Empty_Error").fadeOut("fast");
          $("#WrongPW_Error").fadeIn("fast");
    }
}

and here is the php file

<?php
if(!isset($_POST['username']) || !isset($_POST['password'])){
    echo "Empty_Fields";
    die();
}

$username = $_POST['username'];
$password = $_POST['password'];

$hashed_pass = hash("sha512", $password);
$stmt = $dbh->prepare("SELECT Count(email)as total, username from Users where email = :username and password= :password");
$stmt->bindParam(':username', $username, PDO::PARAM_STR);
$stmt->bindParam(':password', $hashed_pass, PDO::PARAM_STR);
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);
$total = $row['total'];
if($total == 1){
    session_start();
    $_SESSION['user'] = $username;
    $_SESSION['user_name'] = $row['username'];
    echo "LoggedIn";
    die();
}
else{
    echo "Wrong_Credentials";
    die();
}
?>

score 3 · Answer 1 · answered Mar 09 '18 at 20:44

You are not performing the correct check in PHP to see if the POST variables are empty.

Read: What's the difference between 'isset()' and '!empty()' in PHP?

isset($_POST['username'])

will return true if the POST parameter exists, even if its content is an empty string. You need both tests: isset AND empty.

if(!isset($_POST['username']) || !isset($_POST['password'])){
    echo "Missing_Param";
    die();
}

if(empty($_POST['username']) || empty($_POST['password'])){
    echo "Empty_Fields";
    die();
}

wolfson · Answer 2 · 2018-03-09T20:47:43.213

Edit: I did not notice that you're using `async: false`; leaving this answer for reference. In general it's a good idea to use non-blocking calls in JS so other UI elements aren't affected.

$.ajax does not return anything; it's an asynchronous call that will call a function when it completes. You'll need to do something like this:

$.ajax({
  // other arguments here
  success: function(data) {
    // handle success
  },
  error: function() {
    // handle error
  }
});

More examples available here and here.

score 1 · Answer 3 · answered Mar 09 '18 at 20:48

Instead of calling die() on your PHP code, send an error response. Call http_response_code(401) (not authorized response). Second issue is that $.ajax doesn't return a response and async = false has been deprecated and should not be used. Instead, define two functions for success and failure and just set those as the success and error parameters of your AJAX request.

    $.ajax({
         type: 'post',
         data: 'username='+username+'&password='+password,
         url: '/account/login.php',
         async: false,
         success: successFunction,
         error: errorFunction
     });

    function successFunction(response){
        $("#WrongPW_Error").fadeOut("fast");
        $("#Empty_Error").fadeOut("fast");
        $("#LoggedIn").fadeIn("fast");
        setTimeout(location.reload(),2200);

    }
    function errorFunction(response){
            $("#WrongPW_Error").fadeOut("fast");
            $("#Empty_Error").fadeIn("fast");
     }

Handling ajax response exceptions

3 Answers3

Edit: I did not notice that you're using async: false; leaving this answer for reference. In general it's a good idea to use non-blocking calls in JS so other UI elements aren't affected.

Edit: I did not notice that you're using `async: false`; leaving this answer for reference. In general it's a good idea to use non-blocking calls in JS so other UI elements aren't affected.