Question

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

但是单击按钮后，我使用JQuery AJAX方法将其提交到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 / 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如果有效

Answer 2

使用此代码，

<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();

Answer 3

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...");
}

Answer 4

您必须更改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');
  }

Answer 5

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

删除你的ajax成功的最后一个条件，并在成功条件

中做这样的事情

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

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

5 个答案: