如何通过ajax调用将用户重定向到页面？

Question

我有一个登录页面，用户可以在其中输入电子邮件和密码。
因此，我能够对另一个页面进行 ajax 调用以配置数据。
现在，如果电子邮件和密码正确，那么它必须将用户重定向到一个名为“主页”的新页面。
我试过了，但是，它将 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脚本将header发送回浏览器并带有302（重定向）状态码，然后浏览器再次发送主页的GET请求，并返回该请求的结果作为ajax调用的成功。所以，你在.login-resultdiv里面放了一个完整的主页。

现在，如果您只是在成功函数中使用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 );
}