My AJAX request is not validated correctly

Question

New in web design here. I have a login form that validates and works fine in php, but when I try to validate using ajax, it doesn't work. When I start the page, she says that it is a success, regardless of the input to the form. I tried for several days trying to get it to test many methods. If there is a better way, let me know!

php is here and is on the same page as in the login form

if (isset($_POST['login'])) {

    $email = mysqli_real_escape_string($con, $_POST['email']);
    $password = mysqli_real_escape_string($con, $_POST['password']);
    $result = mysqli_query($con, "SELECT * FROM users WHERE email = '" . $email. "' and password = '" . md5($password) . "'");

    if ($row = mysqli_fetch_array($result)) {
        echo json_encode('true');
        $_SESSION['usr_id'] = $row['id'];
        $_SESSION['usr_name'] = $row['name'];
        $_SESSION['logged_in'] = true;


    } else {
        echo json_encode('false');
        $errormsg = "Incorrect Email or Password!!!";
    }
}


?>

$(document).ready(function() {
  $('#login_submit').click(function() {
      var form = $('#login_form').serialize();
    $.ajax({
        type: "POST",
        url: "header.php",
        data: form,
        success:function (response){
                
                alert('Hi');
        
        },
        error: function(response){
                
                alert('Nope');
            
        }
          
        
   });
 });
});

<form id="login_form" form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="loginform">
                
                <label class="login_form_labels"> Email:</label>
                
                <input type="email" id="email" class="login_input" name="email"><br><br>
                
                <label class="login_form_labels"> Password:</label>
                
                <input type="password" id="password" class="login_input" name="password"><br>
                
                <div id="stay_log">
                    Stay logged in.
                    
                    <input type="checkbox" name="stayLoggedIn" value=1 id="checkbox_1">
                    
                </div>
                
                
                <input class="login_form_btn" name="login" value="Submit" type="Submit" id="login_submit">
                
                <button class="login_form_btn" type="button">Forget your Password?</button>

            </form>

Run codeHide result

Please, help!

Answer 1

First use warning (response) to find out the answer you get. It must be true or false.

success: function (response) {

            if(response === "true") 
           {
               alert("hi");
           }
           else
           {
             alert("nope");
           }
    },

Answer 2

dataType Json ajax,

$.ajax({
    type: "POST",
    url: "header.php",
    dataType: json,
    data: form,
    success:function (response){
            alert('Hi');
    },
    error: function(response){
            alert('Nope');
    }
});

...

Answer 3

, JSON ajax.

PHP-.

$response=array();
if (!empty($_POST)) {
    $email = mysqli_real_escape_string($con, $_POST['email']);
    $password = mysqli_real_escape_string($con, $_POST['password']);
    $result = mysqli_query($con, "SELECT * FROM users WHERE email = '" . $email. "' and password = '" . md5($password) . "'");

    if ($row = mysqli_fetch_array($result)) {
        echo json_encode('true');
        $_SESSION['usr_id'] = $row['id'];
        $_SESSION['usr_name'] = $row['name'];
        $_SESSION['logged_in'] = true;


        $response['type']="success";
        $response['message']="Login done successfully";


    } else {
        $response['type']="error";
        $response['message']="Incorrect Email or Password!!!";
    }
}
else
{
    $response['type']="error";
    $response['message']="invalid post request";
}

ob_clean();
echo json_encode($response);
die();

json.

javascript- ajax

$(document).ready(function() {
  $('#login_submit').click(function() {
      var form = $('#login_form').serialize();
    $.ajax({
        type: 'post',
        url: $('#login_form').attr("action"),
        data: form,
        dataType:'json'
        success:function (response){
                if(response.type=="success")
                {
                    alert(response.message);
                    // write code for handle your success login;
                }
                else
                {
                    alert(response.message);
                    // write code for handle your failure login;

                }

        },
        error: function(response){

                alert('Nope');

        }


   });
 });
});

JSON ajax

Answer 4

jQuery/AJAX HTTP , . , , PHP, .

if (.. login has failed .. ) {
  // HTTP 401 = 'Unauthorized'.
  http_response_code(401);  
}

, JSON, , , . : success, . error, - .

, , - , ( , , ..).

HTTP, 401.