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

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

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

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

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

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

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

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

代码：

/* 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('

• Logged in as ' + data.username + '

• Logout

');

$("#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;

});

你能给我们看看密码吗？

加载页面时需要包含javascript/jquery。运行Ajax调用会将您登录到站点，但如果您试图使用仅在登录时可用的代码，则可能需要刷新。基本上，如果您要使用它，它需要加载。

在页面加载时查看随此一起提供的HTML会很有帮助。

.modal('hide')是隐藏对话框面板的正确方法吗？您是否正在使用jqueryui或其他对话框插件？

如果解决了这个问题，那么知道是什么解决了它就太好了。把它作为你的答案。

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

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

function openSesame() {

$('div.welcome_page').slideUp();

$('div.treasure_trove').show();

}

在Ajax的success设置中调用它。

不是真的用Ajax来划分它。基本上，如果用户登录了，我会用PHP检查内容。如果不是的话，我死的时候会有一个错误说要登录。那很好。但一旦我注销，我就不能真正显示任何其他内容。

@迈克尔：我必须同意杰米的观点。您不应该在登录后使用Ajax加载内容，特别是在登录前页面基本上是空白的情况下。这让我毛骨悚然，好像内容总是隐藏在那里。我很喜欢Hulu这样的站点如何进行异步登录，但是在我能想到的所有示例中，登录后唯一的区别是扩展的可见性，查看到受保护信息的链接，而不是整个页面。

如果没有任何示例代码，我就无法真正检测到问题。至于异步登录，它们也让我毛骨悚然。我和阿贾克斯一起工作了这么久，我只是在等着什么东西崩溃。就像巴甫洛夫式的抽搐

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

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

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

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

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()方法，如下所示：

$("#dataTable tbody tr").on("click", function(event){

alert($(this).text());

});

我没有添加新内容。它在页面源中。我认为这和用PHP死有关。可能发生了什么。

所以内容已经加载到页面上，只是隐藏了？什么是要防止某人在登录前仅仅查看源代码，或者将"true"值传递给Ajax回调函数？更重要的是，你的问题是，内容在成功之后会出现吗？你怎么知道他们正在登录？可能我们需要看看代码。

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

我添加了我的代码，但我认为没有任何错误。

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

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

编辑：

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

$.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'

});

谢谢，但不涉及HTTPS。