javascript - 在同一页面登录，检查SESSION，无需重新加载

Question

目前，我的网站上每个页面的顶部都有一个表单，可让用户输入用户名和密码进行登录。

但是单击按钮后，我使用 JQuery AJAX 方法将其提交到 login.php，无需刷新页面，它会验证凭据并返回用户，无论提交的用户名/密码是否有效。

最后，结果返回到用户尝试登录的页面。

我还希望页面在成功登录后消失，并替换为“欢迎回来，用户!”

一切正常，除了我希望在不重新加载页面的情况下发生这种情况。这是我到目前为止所拥有的:-

如果未设置 session ，则显示表单，否则显示欢迎回来，用户:-

<div class="user">
<?php
    if (isset($_SESSION['logged_user'])) {
        $logged_user = $_SESSION['logged_user'];
        print("<p>Welcome back, $logged_user!</p>");
    }
    else {
        print('<div class="forms">
            <form id="login">
                <label>Username <input type="text" name="username" id="username"></label>
                <label>Password <input type="text" name="password" id="password"></label>
                <input type="submit" class="submit" value="Login" id="login">
                <span class="error"></span>
            </form>
        </div>');
    }
?>
</div>

Javascript/AJAX 处理提交:

$(document).ready(function() {
    $("#login").click(function() {
        var username = $("#username").val();
        var password = $("#password").val();
        var dataString = 'username='+username+'&password='+password;
        if(username != '' && password != '') {
            $.ajax({
                type: "POST",
                url: "login.php",
                data: dataString,
                success: function(responseText) {
                if(responseText == 0) {
                    $("error").html("Invalid login.");
                }
                else if(responseText == 1) {
                    window.location = 'index.php';
                }
                else {
                    alert('Error');
                }
            }
        });
    }
    return false;
});

我的login.php一切正常。

现在，我的页面更新以显示欢迎回来消息的唯一方法是包含以下行:window.location = 'index.php'; 以便页面重新加载。但如果没有这个，用户将成功登录，但将无法看到此内容。

有没有办法在没有 AngularJS 的情况下做到这一点？这是一个类，我们不允许使用框架，这非常令人沮丧!谢谢!

Answer 1

您可以使用动态 HTML (DHTML)。

您不重定向成功函数，而是使用 jquery 更改内容。

类似这样的事情:

success: function(responseText) {
    if(responseText == 0) {
        alert('Invalid login');
    }
    else if(responseText == 1) {
        // Success
        $('#login').parent().append('<p>Welcome back, '+username+'!</p>');
        $('#login').remove();

    }
    else {
        alert('Another Invalid login');
    }
}

API登录返回:

• 如果无效则为 0
• 如果有效则为 1