jQuery AJAX Getting json parseError in the console and responses goes to error function but php script runs fine

Question

I tried researching a lot before posting here.

There are two files login.php and login-validation.php

1. Login.php file contains code including login form and jQuery AJAX script to call login.validation.php

--- Code of login.php ---

    $(document).ready(function() {
        $('#login-form').submit(function(e) {

            e.preventDefault();

            mobile_no = $('#mobile_no').val();
            upassword = $('#upassword').val();

            console.log(mobile_no, upassword);

            $.ajax({
                type: "POST",
                url: "server/login-validation.php",
                data: {
                    Mobile_no: mobile_no,
                    Password: upassword
                },
                cache: false,
                dataType:'json',
                success: function(response) {
                    console.log("Data gone successfully");
                    if(response["type"] == 'LoginSuccess'){
                        $('#success-message').text(response); // This works but not below ones
                    }
                    if(response["type"] == 'WrongCredentials'){
                        $('#success-message').text(response);
                    }
                    else{
                        $('#success-message').text(response);
                    }

                },

                error: function(xhr, textStatus, errorThrown){
                    console.log(xhr.responseText); Shows my echo message i.e. Wrong credentials for wrong credentials
                    console.log(textStatus); // Shows parseError
                    console.log(errorThrown); // Shows SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
                }
            });
        });
    });
</script> 

---Code of login.validation.php---

session_start();
$message = array(); //Creating array variable to display custom messages depending on [TYPE]
//Require DB

require_once('db.php');

//Get values from the login form

$Mobile_number = $mysqlconnect->real_escape_string(trim($_POST['Mobile_no']));
$Password = $mysqlconnect->real_escape_string(trim($_POST['Password']));


//Query database for valid input match

$validation = "SELECT * from team_captain WHERE Mobile_Number = '$Mobile_number'";

$query = $mysqlconnect->query($validation);

$result = mysqli_num_rows($query);

if($result > 0){
    $fetch_pass = mysqli_fetch_array($query);
    $password_hash = $fetch_pass['User_Password'];
    if(password_verify($Password,$password_hash))
    {
        $message["type"] = 'LoginSuccess';   
        $_SESSION['sess_username'] = $fetch_pass['Full_Name'];  
          
    }
    else{

        $message["type"] = 'WrongCredentials';
        echo "Wrong credentials". $mysqlconnect->error;
        
    }
}
else{
    $message["type"] = 'WrongMobile';
    echo "Mobile number doesn't exists";    
}

header('Content-type: application/json');
echo json_encode($message);
?>

Tried dataType: 'json' - Didn't work

Tried without dataType - Didn't work

Php script is running properly with right error messages for different "if" statements but AJAX responses goes to error:function() rather than success: function()

In the network tab - The response type is JSON and it displays [type] ie [WrongCredentials]

Not understanding what is wrong here. Any help would be appreciated.

Answer 1

You need to parse the JSON response using jQuery.parseJSON()

var data = jQuery.parseJSON(response);

Now, you can check it

if(data.type == "LoginSuccess"){
 // do something
}elseif(data.type == "Wrong Password"){
 // do something else
}

And remove echo from your php code

session_start();
$message = array(); //Creating array variable to display custom messages depending on [TYPE]
//Require DB

require_once('db.php');

//Get values from the login form

$Mobile_number = $mysqlconnect->real_escape_string(trim($_POST['Mobile_no']));
$Password = $mysqlconnect->real_escape_string(trim($_POST['Password']));


//Query database for valid input match

$validation = "SELECT * from team_captain WHERE Mobile_Number = '$Mobile_number'";

$query = $mysqlconnect->query($validation);

$result = mysqli_num_rows($query);

if($result > 0){
    $fetch_pass = mysqli_fetch_array($query);
    $password_hash = $fetch_pass['User_Password'];
    if(password_verify($Password,$password_hash))
    {
        $message["type"] = 'LoginSuccess';   
        $_SESSION['sess_username'] = $fetch_pass['Full_Name'];  
          
    }
    else{

        $message["type"] = 'WrongCredentials';
        
    }
}
else{
    $message["type"] = 'WrongMobile'; 
}

header('Content-type: application/json');
echo json_encode($message);
?>