关于php：AJAX登录表单，登录后更新页面内容


AJAX Login form, update page content after logging in

假设我有一个页面，在头部有一个登录/注销函数，它完全通过Ajax工作。

如果用户没有登录，我想向他显示"嘿，登录"，并允许他通过Ajax登录。这一切都很好，而且很有效。

但是如果用户登录，我就不能访问任何没有放到页面上的内容——当用户成功登录时，访问页面时的内容。

如果我查看页面源，元素就在那里，但是如果我做诸如$("#container").show()、.slideDown()、.html()之类的事情，它们都不做任何事情。

我需要让用户刷新页面，还是将所有代码存储在JavaScript中以进行部署？我希望不会。

我在下面的登录中加入了我的javascript，但这并不是重点。这是有效的。我说的问题是$("#all").slideDown()。即使通过控制台访问它，它也不会做任何事情。

如果用户没有登录，那么这个问题可能与使用php死亡有关。此代码在$(function() { }中执行。

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* Get the AJAX Login form Ready */
$("#login-form").submit(function() {
    $("#login-error").hide();
    var username = $("#username").val();
    var password = $("#password").val();
    if (username =="" || password =="") {
        $("#login-error").show();
        $("#login-error-heading").html("You've entered something wrong.");
        $("#login-error-content").html("Please enter both a username and a password.");
        return false;
    }
    $.get(
       "process-login.php",
        {
            username:username,
            password : password
        }, function(data) {
            if (data.success == 1) {
                /* Hide the login form */
                $("#login").modal("hide");

                /* remove the login button */
                $('#nav-login').remove();

                /* add the logout button to the DOM */
                $("#nav-container").append('<ul id="user-options" class="nav pull-right"><li class="divider-vertical">
</li>
<li class="dropdown">Logged in as ' + data.username + '<b class="caret"><ul class="dropdown-menu">
<li>
Logout
</li>

</ul>

</li>

</ul>
');

                $("#all").slideDown();
            } else {
                $("#login-error").show();
                $("#login-error-heading").html("You've entered something wrong.");
                if (data.success == 3) {
                    $("#login-error-content").html("This account is locked out because of incorrect password usage. Please try again in 10 minutes.");
                } else {
                    $("#login-error-content").html("The username and password combination was not found.");
                }
            }
        },
       "json"
    );
    return false;
});
相关讨论

首先，我认为使用Ajax划分表示逻辑不是一个好主意。我将使用PHP检测它们是否首先登录，并相应地分离视图。

如果您必须使用Ajax来完成这项工作，我建议您重定向，因为这是我登录时喜欢的。感觉像是一个新的开始。如果您不想重定向，为什么不将所有布局更改放在单独的函数中，如：

1
2
3
4
function openSesame() {
   $('div.welcome_page').slideUp();
   $('div.treasure_trove').show();
}

在Ajax的success设置中调用它。

相关讨论

正如@jamie所说，如果不需要的话，不要混合JS和业务逻辑。

在这里，您需要使用模板化引擎，并尝试构建类似于MVC的东西。查看smarty http://www.smarty.net/，或者如果您真的想要合法的MVC框架，可以使用cakephp或symfony。

您不需要重定向。它很慢，对用户来说不太愉快。

让我们以一个使用smarty的伪代码示例为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
global $smarty;

//go grab your user object
$user = PseudoUser::validate_current_user();
if( $user->login_status === true )
{
  //user is logged in
  $smarty->assign( 'user', $user );
  $smarty->display( 'logged_in_template.tpl' );
}
else
{
  //user is logged out
  $smarty->display( 'logged_out_template.tpl' );
}

巴达冰巴达繁荣。

对于JSAjax登录，是的，在本例中只需刷新页面。当重新加载页面时，您的PHP控制器应该已经确定了要做什么。

我可能是错的，但我相信问题在于，在DOM中，您的新内容没有绑定到任何jquery事件处理程序。将事件绑定到未来元素的方法是使用.on()方法，如下所示：

1
2
3
$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});
相关讨论

没有代码，我们做不了什么。我将检查以确保您没有试图对初始绑定时不存在的内容使用绑定事件。如果某个东西在Ajax回调之前不存在，那么您必须在加载之后绑定它。

相关讨论

听起来您的页面上有一个javascript错误。我假设您的登录部分通过HTTPS提供服务。如果是这样，并且您的javascript功能存储在.js文件中，那么您可能还需要通过https包含您的javascript文件。

使用网络路径引用(或协议不可知路径)有助于解决这些类型的HTTPS与HTTP问题。

1
<script src="\\js\myJsFile.js">

编辑：

您可以尝试使用$.Ajax函数，以便捕获发生的任何错误…这可能会告诉您更多关于请求实际发生的事情。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
    url:"process-login.php",
    data: {
        username: username,
        password: password
    },
    success: function (data) {
        // your function
    },
    error: function (jqXhr, error) { // see http://stackoverflow.com/a/1956505/296889
        alert("readyState:" + jqXhr.readyState +"
status:" + jqXhr.status);
        alert("Response Received:" + jqXhr.responseText);
    },
    dataType: 'json'
});
相关讨论