Перенаправить на другую страницу в PHP через AJAX

Question

Моя страница собирает информацию из javascript и отправляет ее в PHP, а затем в MySQL, проблема в том, что я хочу, чтобы она перенаправляла на разные страницы в зависимости от данных, которые у меня есть в БД, я пытался использовать заголовок, но это просто показывает мне весь HTML-код другой страницы в предупреждении, и я не хочу этого. Я хочу, чтобы он перенаправлял на ту или иную страницу в зависимости от условия

HTML (Login.html)

<div class="wrap-input100 validate-input" data-validate = "Enter username">
<input class="input100" type="text" id="user" name="username" placeholder="Email">
<span class="focus-input100" data-placeholder="&#xf207;"></span>
</div>

<div class="wrap-input100 validate-input" data-validate="Enter password">
<input class="input100" type="password" id="pass" name="pass" placeholder="Password">
<span class="focus-input100" data-placeholder="&#xf191;"></span>
</div>

<div class="container-login100-form-btn">
<a class="login100-form-btn" id = "logBtn">
Login
</a>
</div>

SCRIPT

$('#logBtn').click(function(event){ 
    user = document.getElementById("user").value;
    password = document.getElementById("pass").value;

    $.ajax({
        type:"POST",
        url:"login.php",
        async: false,
        data: {user:user,password:password},
        success: function(data){
        alert(data);
        //window.location = '../Main/index.html';
        }
        });
    });

PHP

<?php
$servername = "localhost";
$username = "root";
$password = "tbjdjkdl";
$dbname = "dbbbbbb";

$conn = new mysqli($servername, $username, $password, $dbname);

$user = $_POST['user'];
$pass = $_POST['password'];

$sql = "SELECT * FROM users WHERE email='$user' AND clave='$pass'"; 
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    $sql = "SELECT * FROM users WHERE email='$user' AND clave='$pass' AND permisos='Administrador'";
    if (mysqli_num_rows($result) > 0){
        echo "admin";
        header('Location: ../Main/index.html');
        exit;
    }
    else{
    echo "user";
    header('Location: ../Main/startemp.html');
    exit;
    }

 } else {
    $msg = "username/password invalid";
    echo $msg;
 }

mysqli_close($conn);
?>

Answer 1

Используйте правильный формат AJAX для обработки ответа на стороне клиента. Вот модифицированный код

login.html

      <div class="wrap-input100 validate-input" data-validate = "Enter username">
      <input class="input100" type="text" id="user" name="username" placeholder="Email">
      <span class="focus-input100" data-placeholder="&#xf207;"></span>
      </div>

      <div class="wrap-input100 validate-input" data-validate="Enter password">
      <input class="input100" type="password" id="pass" name="pass" placeholder="Password">
      <span class="focus-input100" data-placeholder="&#xf191;"></span>
      </div>

      <div class="container-login100-form-btn">
      <a class="login100-form-btn" id = "logBtn">
      Login
      </a>
      </div>
      <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
      <script>
      $('#logBtn').click(function(event){ 
          user = document.getElementById("user").value;
          password = document.getElementById("pass").value;

          $.ajax({
              type:"POST",
              url:"login.php",
              async: false,
              data: {user:user,password:password},
              success: function(data){
              alert(data);
          if(data=="admin"){
                  window.location="https://..Main/index.html";
                }
        if(data=="user"){
                  window.location="https://....startemp.html";
                }
              }
              });
          });

      </script>

login.php

      <?php

      $servername = "localhost";
      $username = "root";
      $password = "root";
      $dbname = "test";

      $conn = new mysqli($servername, $username, $password, $dbname);

      $user = $_POST['user'];
      $pass = $_POST['password'];

      $sql = "SELECT * FROM users WHERE email='$user' AND clave='$pass'"; 

      $result = mysqli_query($conn, $sql);

      if (mysqli_num_rows($result) > 0) {
          $sql_1 = "SELECT * FROM users WHERE email='$user' AND clave='$pass' AND permisos='Administrador'";
           $result_1 = mysqli_query($conn, $sql_1);
          if (mysqli_num_rows($result_1) > 0){

              echo "admin";
              exit(0);
            }
             else{
          echo "user"; 
           exit(0);
          }

       } else {
          $msg = "username/password invalid";
          echo $msg;
       }

      mysqli_close($conn);
      ?>

Answer 2

Вы можете использовать JSON-тип ответа на Ajax-запрос, чтобы обратный вызов Ajax обрабатывал перенаправление.

SCRIPT

$('#logBtn').click(function(event){ 
    user = document.getElementById("user").value;
    password = document.getElementById("pass").value;

    $.ajax({
        type:"POST",
        url:"login.php",
        dataType: "JSON",
        async: false,
        data: {
            user:user,
            password:password
        },
        success: function(data){
            alert(data.message);
            alert(data.redirect);
            window.location.href = data.redirect;
        }
    });
});

PHP

<?php
$servername = "localhost";
$username = "root";
$password = "tbjdjkdl";
$dbname = "dbbbbbb";

$conn = new mysqli($servername, $username, $password, $dbname);

$user = $_POST['user'];
$pass = $_POST['password'];

$sql = "SELECT * FROM users WHERE email='$user' AND clave='$pass'"; 
$result = mysqli_query($conn, $sql);
$return = array();

if (mysqli_num_rows($result) > 0) {
    $sql = "SELECT * FROM users WHERE email='$user' AND clave='$pass' AND permisos='Administrador'";
    if (mysqli_num_rows($result) > 0){
        $return = array(
            "message" => "admin",
            "redirect" => "../Main/index.html";
        );
    }
    else{
        $return = array(
            "message" => "user",
            "redirect" => "../Main/startemp.html";
        );
    }

} else {
    $return = array(
        "message" => "username/password invalid",
        "redirect" => "";
    );
}

echo json_encode($return);
mysqli_close($conn);
exit;
?>

Answer 3

$('#logBtn').click(function(event){ 
    user = document.getElementById("user").value;
    password = document.getElementById("pass").value;

    $.ajax({
        type:"POST",
        url:"login.php",
        async: false,
        data: {user:user,password:password},
        success: function(data){
             if(data == 'admin'){
                window.location.href='../Main/index.html';
             }
             elseif(data == 'user'){
                window.location.href='../Main/startemp.html';
             }else{
               alert(data);
             }
        });
    });

// удалите заголовок строки () на login.php;

Answer 4

Используйте правильный формат JSON для обработки ответа на стороне клиента. Вот модифицированный код

<?php
$servername = "localhost";
$username = "root";
$password = "tbjdjkdl";
$dbname = "dbbbbbb";

$conn = new mysqli($servername, $username, $password, $dbname);

$user = $_POST['user'];
$pass = $_POST['password'];

$sql = "SELECT * FROM users WHERE email='$user' AND clave='$pass'";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    $sql = "SELECT * FROM users WHERE email='$user' AND clave='$pass' AND permisos='Administrador'";
    if (mysqli_num_rows($result) > 0) {
        echo json_encode(['status' => 'success', 'url' => '../Main/index.html']);
        exit;
    } else {
        echo json_encode(['status' => 'success', 'url' => '../Main/startemp.html']);
        exit;
    }
} else {
    $msg = "username/password invalid";
    echo json_encode(['status' => 'error', 'msg' => $msg]);
}

mysqli_close($conn);
?>

Ваш JS

<script type="text/javascript">
    $('#logBtn').click(function (event) {
        user = document.getElementById("user").value;
        password = document.getElementById("pass").value;
        $.ajax({
            type: "POST",
            url: "login.php",
            async: false,
            data: {user: user, password: password},
            success: function (data) {
                if (data.status === 'success')
                    window.location.href = data.url; //Just do the redirection here
                } else {
                    //Do your failiure stuff
                }
            }
        });
    });
</script>