javascript - 在同一页面上登录,无需重新加载即可检查 SESSION

标签 javascript php jquery ajax login

我目前在我网站的每个页面顶部都有一个表单,允许用户输入用户名和密码进行登录。

但是一旦单击按钮,我使用 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有没有办法做到这一点?这是一个类,我们不允许使用框架,这非常令人沮丧!谢谢!

最佳答案

您可以使用动态 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 如果有效
  • 关于javascript - 在同一页面上登录,无需重新加载即可检查 SESSION,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29203358/

    相关文章:

    javascript - 发现并修复内存泄漏

    php - 如何 preg_match 内容处置 header 中的所有三种情况?

    jquery - 如何在拖动目标元素时启用滚动?

    javascript - 在裁剪中裁剪的图像不正确

    javascript - 如何在ReactJS的map函数中控制null值

    javascript - 如何将DOM节点数据集中的所有数字转换为JavaScript数字

    javascript - javascript 中的 bg 颜色、悬停、!important 和 .css

    php - 打包和部署 Symfony 网站

    php - Laravel 一对多关系不起作用 - 返回递归

    javascript - 使用 jQuery 显示/隐藏表列