Как перенаправить пользователя на страницу по вызову ajax?

Question

У меня есть страница входа, в которую пользователь вводит адрес электронной почты и пароль.
Итак, я смог сделать ajax-вызов на другой странице для настройки данных.
Теперь, если адрес электронной почты и пароль верны, он должен перенаправить пользователя на новую страницу, называемую «home».
Я пробовал, но перенаправил div на страницу.
Любые решения?
Спасибо заранее, всем!

<script type="text/javascript"> 
    $(document).ready(function (e) { 
     $(".login-form").on('submit',(function(e) { 
      e.preventDefault(); 
      $.ajax({ 
       url: "verify/login.php", 
       type: "POST", 
       data: new FormData(this), 
       contentType: false, 
       cache: false, 
       processData:false, 
       success: function(data) 
       { 
        $(".login-result").html(data); 
       }, 
       error: function() 
       { 
       }   
      }); 
     })); 
    }); 
</script> 

Это простой код запроса, его работа полностью прекрасна.
Теперь, в php-файле, который является login.php.

if ($email == $dbemail && $password == $dbpassword) { 
    header("location:home"); 
} 

В этом коде страница «home» отображается в div «login-result».

Answer 1

Проблема заключается в том, что после запроса ajax сценарий login.php отправляет заголовок обратно в браузер с кодом статуса 302 (переадресация), затем браузер отправляет другой запрос GET для домашней страницы, и результат этого запроса возвращается как успех аякс-звонка. Итак, вы разместили полную домашнюю страницу внутри .login-result div.

Теперь, если вы используете только функцию window.location для вызова внутри функции, вы получите все вышеперечисленное плюс еще один запрос GET для домашней страницы.

Одним из решений является отправка ответа как объекта JSON с успехом или статусом ошибки. Пример:

// login.php 
if ($email == $dbemail && $password == $dbpassword) { 
    die(json_encode([ 'success' => 1 ])); 
} else { 
    die(json_encode([ 'success' => 0, 'error' => 'invalid username or password' ])); 
} 

Таким образом, вы будете знать, является ли Войти успешным или нет, а затем вы можете выбрать соответствующее действие (перенаправление или показать ошибки). Не говоря уже об исключении ненужных запросов.

dataType: 'json', 
success: function(data) 
{ 
    if (data.success) window.location = "home.php"; // change location 
    else $(".login-result").html(data.error); 
}