如何在Ajax中使用标头

Question

I'm creating a login checker using jQuery and Ajax, i'm calling query.php which verifies the username and password. And if they don't match, an alert will be shown, and if they are correct it will redirect the user to the other page. The error message works just fine. The problem is that when i enter correct username and password, the page doesn't redirect. In my case i'm been redirected twice, from login.php to query.php then to groupes.php or seance.php

query.php

<?php
require('queries/dbsetup.php');

$username = $_POST['username'];
$password = $_POST['password'];
$type = "";
if (empty($username) || empty($password)) { ?>
    <script>
        sweetAlert("Oops...", "Veuillez remplir tous les champs !", "error");
    </script>
<?php
} else {
echo $type;
switch ($_POST['type']) {
case 'etudiant' : $type = 'etudiant';break;
case 'enseignant' :$type = 'enseignant';break;
}

// Check the username and password
$query = "SELECT username FROM ".$type." where username = '".$username."' AND password ='".$password."' ;";
$set = mysqli_query($conn,$query);
$run = mysqli_fetch_array($set);
$id = $run['username'];

// Save the type
$_SESSION['type'] = $type;


if (!empty($id)) {
$_SESSION['user_id'] = $username;

switch ($type) {
case 'etudiant':
header('location: ../groupes.php',true);exit;break;
    case 'enseignant':
header('location: ../seance.php',true);exit;break;

}

} else { ?>
    <script>
        sweetAlert("Oops...", "Le nom d'utilisateur et le mot de passe ne sont pas identique !", "error");
    </script>
    <?php
}
}

?>

login.php

<form action="query.php" method="post" id="e1" class="">
              <h4>Nouvelle seance</h4>
              <input name="username" placeholder="Username" type="text" class="form-control">
              <input name="password" placeholder="Password" type="password" class="form-control">
              <input name="type" placeholder="Type" type="text" class="form-control"> 
              <button id="login">Login</button>                 
              <p id="result"></p>
</form>

login.js

$('#e1').submit(function(){
 return false;
});

$('#login').click(function(){
 $.post(
 $('#e1').attr('action'),
 $('#e1 :input').serializeArray(),
 function(result){
 $('#result').html(result);
 }
 );
});

Answer 1

You can achieve the desired behavior by telling the client to load the new page via javascript.

You can change these lines

switch ($type) {
    case 'etudiant':
        header('location: ../groupes.php',true);exit;break;
    case 'enseignant':
        header('location: ../seance.php',true);exit;break;
}

To

switch ($type) {
    case 'etudiant':
        ?>
        <script>
            window.location = "../groupes.php";
        </script>
        <?php
        exit;
        break;
    case 'enseignant':
        ?>
        <script>
            window.location = "../seance.php";
        </script>
        <?php
        exit;
        break;
}