登录同一页面，检查SESSION而不重新加载

Login on same page, check SESSION without reload

本文关键字：新加载 加载 一页 SESSION 检查 登录      更新时间：2023-09-26

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

但是一旦点击按钮，我就使用JQueryAJAX方法将其提交到login.php，而无需刷新页面，在那里它验证凭据并返回用户提交的用户名/密码是有效还是无效。

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

我还希望页面在成功登录后，表单消失，取而代之的是"欢迎回来，用户！"

一切都正常，除了我希望在不重新加载页面的情况下实现这一点。以下是我目前所拥有的：-

如果会话未设置，则显示表单，否则显示"欢迎回来"，用户：-

<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/AAJAX处理提交：

$(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如果有效

使用此代码，

<div class="user">
<div class="after_login" style="display:none">
<?php
        $logged_user = $_SESSION['logged_user'];
        print("<p>Welcome back, $logged_user!</p>");?>
</div>
<div class = "before_login">
        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>
</div>

在脚本中这样使用而不是：

 window.location = 'index.php';

使用下线，

  $('.after_login').show();
  $('.before_login').hide();

您必须更改javascript代码中的一些修改，如下所示：

$(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,
                dataType: "json", 
                success: function(responseText) {
                if(responseText.status == 'invalid') {
                    $(".error").html("Invalid login.");
                }
                else if(responseText.status == 'valid') {
                    $('.after_login').html('Welcome back,'+responseText.username);
                    $('.after_login').show();
                    $('.before_login').hide();
                }
                else {
                    alert('Error');
                }
            }
        });
    }
    return false;
});

在上面的例子中，我添加了一行额外的dataType："json"，所以现在你需要从你的login.php中以json格式发送输出，并成功地进行了一些修改。

$response = array();
// $result variable get result from your database
if(count($result) == 0)
{
    $response['status'] = 'invalid';
}else{
    $response['status'] = 'valid';
    $response['username'] = $result['username'];
}
echo json_encode($response);
exit;

所以你的成功变成低于

success: function(responseText) {
  if(responseText.status == 'invalid') {
    $(".error").html("Invalid login.");
  }
  else if(responseText.status == 'valid') {
    $('.after_login').html('Welcome back,'+responseText.username);
    $('.after_login').show();
    $('.before_login').hide();
  }
  else {
    alert('Error');
  }

在login.php中，将成功条件更改为输出用户名，而不是1。因此responseText将在ajax回调中使用用户名。

删除ajax成功中的最后一个else条件，并在成功条件中执行类似的操作

$('.forms').html('<p>Welcome back, ' + responseText + '!</p>');

PHP:

if (isset($_SESSION['logged_user'])) {
        $logged_user = $_SESSION['logged_user'];
//Leave out the print(Welcome...) part, it won't do anything because the page won't be refreshed.    
}
else{
exit('1');
}

在Ajax中，不要担心responseText==0，只需使用==1:

success: function(responseText) { 
if(responseText == "1") {
alert("Nope");
}
else {
$("#successdiv").html("welcome...");
}
相关文章：