Не могу перенаправить на другую страницу php после того, как я войду, вместо этого форма входа перезагружается на той же странице

Question

Недавно я столкнулся с этой проблемой пару дней. Проверка логина работает отлично. К сожалению, я не могу перенаправить на другую страницу, которая является index.php после того, как я пытаюсь войти в систему, и вместо этого форма входа перезагружается на той же странице в нижней части формы, которая должна быть для сообщения об ошибке только в Если пользователь ввел неправильное имя пользователя или пароль. Вот скриншоты вида:

Снимок экрана формы входа в систему login.php

Снимок экрана формы входа в систему, когда пользователь не заполняет все поля

Снимок экрана формы входа в систему, когда пользователь ввел неправильное имя пользователя или пароль

Снимок экрана формы входа в систему после того, как пользователь ввел правильное имя пользователя и пароль, форма перезагружается на той же странице. Вместо этого я хочу перенаправить его на другую страницу, которая index.php

Вот мой код:

login.php

<?php 
    require_once 'templates/header.php';
?>

<link rel="stylesheet" type="text/css" href="styles/login-style.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
        $('#login').click(function(){   
            var username = $('#usernameID').val();
            var password = $('#passwordID').val();

            $.post("classes/validation_login.php",{
                user_val : username,
                password_val : password,

            },function(data){
                if(data == 'success'){
                    window.location.href='index.php';
                }else{
                    $('.error-message').html(data);
                }
            });
        });

    });


</script>

<title>Login</title>
<form id="login-form">
    <h1>Login</h1>
    <input type="text" id="usernameID" name="username" placeholder="Username" autocomplete="off"> <br>

    <input type="password" id="passwordID" name="password" placeholder="Password" autocomplete="off"> <br>

    <input type="button" id="login" name="register-button" value="Login">

</form>

<div class="error-message">

</div>

<?php 
    require_once 'templates/footer.php';
?>

validation_login.php

<?php 

require_once '../core/init.php';

class validation_login{

    private $username,$password;
    public $errorMessage;

    public function validate_login(){
        $db = new database();
        $this->username = input::get('user_val');
        $this->password = input::get('password_val');

        if(empty($this->username) || empty($this->password)){
            $this->errorMessage = "Please fill all the fields!";
            return false;
        }else if(!$db->login()){
            $this->errorMessage = "Invalid username or password!";
            return false;
        }else{
            session::set('username',$this->username);
            return true;
        }
    }

}

$login = new validation_login;
$login->validate_login();
echo "$login->errorMessage";

?>

Любая помощь будет принята с благодарностью. Спасибо!

Answer 1

It is because you cannot redirect on the server side when using ajax, try returning a value and redirect base in the value, you can rewrite your code as below

validation_login.php

    <?php 

require_once '../core/init.php';

class validation_login{

    private $username,$password;
    public $errorMessage;

    public function validate_login(){
        $db = new database();
        $this->username = input::get('user_val');
        $this->password = input::get('password_val');

        if(empty($this->username) || empty($this->password)){
            $this->errorMessage = "Please fill all the fields!";

        }else if(!$db->login()){
            return false;

        }else{
            session::set('username',$this->username);
            return true;

        }
    }

}


?>

login.php



     <?php 
    require_once 'templates/header.php';
    ?>

    <link rel="stylesheet" type="text/css" href="styles/login-style.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

     <script type="text/javascript">

    $(document).ready(function(){
        $('#login').click(function(){   
            var username = $('#usernameID').val();
            var password = $('#passwordID').val();

            $.post("classes/validation_login.php",{
                user_val : username,
                password_val : password,

            },function(data){
                if(data){
                 //means validation went through
                 //redirect user
                 window.location.href='index.php';


                 }else{
                 //validation returned false
                 //display error message
                     $('.error-message').html('incorrect Username or password');
                  }


            });
        });

    });


</script>

    <title>Login</title>
    <form id="login-form">
    <h1>Login</h1>
    <input type="text" id="usernameID" name="username" placeholder="Username" autocomplete="off"> <br>

    <input type="password" id="passwordID" name="password" placeholder="Password" autocomplete="off"> <br>

    <input type="button" id="login" name="register-button" value="Login">

</form>

<div class="error-message">

</div>

<?php 
    require_once 'templates/footer.php';
?>

Answer 2

Вы перенаправляете внутри вызова ajax. Это ошибка. Удалите вызов AJAX и добавьте тег формы в форму. (to validation_login.php)

<form action="validate_login.php" method="post" id="login-form">