jQuery和放大器; AJAX登录表单 [英] jQuery & AJAX login form

问题描述

我忙于开发一个网站，我在右上角的登录框。我希望用户能够在同一页面上登录，不清爽。

I am busy developing a site where I have a login box in the top right corner. I want the user to be able to log in on the same page, without refreshing.

OK，我得到的那部分工作，但我仍然后登录过程中苦苦挣扎，我看如下：

OK, I got that part working, but I am still struggling with post-login process, my look as follows:

（HTML）

<li class="login">
<? if (!isset($_SESSION['logged_in'])) {
    include("isNotLoggedIn.php");
} else {
    include("isLoggedIn.php");
} ?>
</li>

（PHP）

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

if ($username == "admin" && $password == "XXX") {
    $_SESSION['logged_in'] = true;
    $_SESSION['user'] = $username;

    echo include("isLoggedIn.php");
} else {
    echo include("isNotLoggedIn.php");
}

（我的jQuery）

(my jQuery)

$("form#login").submit(
    function() {
    	var usernameVal = $("input[name='username']").val();
    	var passwordVal = $("input[name='password']").val();

    	$.post("login.php",{username : usernameVal, password : passwordVal},
    	// callback function to receive feedback
    	function(data) {
    		$("li.login").html(data);
    	});
    	return false;
    });

$("a[name='logout']").click(
    function() {
    	$.post("logout.php",
    		function(data) {
    			$("li.login").html(data);
    		});
    });

（isLoggedIn.php）

(isLoggedIn.php)

Welcome, <? echo $_SESSION['user']; ?>!<br />
<a href="#">Add game</a><br />
<a href="#">Add player</a><br /><br />
<a href="#" name="logout">Log out</a>

（isNotLoggedIn.php）

(isNotLoggedIn.php)

<form method="post" id="login">
    <input type="text" name="username" alt="Username" class="text" title="Username: Required" value="username" /><br />
    <input type="password" name="password" alt="Password" class="text" title="Password: Required" value="password" /><br />
    <input type="submit" name="submit" alt="Login" title="Login" value="Login" class="submit" />
</form>

在登录过程的工作原理，但注销是乱码。当我点击的isLoggedIn.php注销链接，它记录了，但我的jQuery的文字输入的不是现在的形式本身的工作，以及jQuery的。

The log in process works, but the log out is garbled. When I click on the Logout link in isLoggedIn.php, it logs out, but my jQuery on the text input's don't work anymore, as well as the jQuery on the form itself.

有没有办法，我必须刷新我的jQuery重新激活的替代HTML的方法吗？任何帮助AP preciated。

Is there a way that I must refresh my jQuery to reactivate on the replaced HTML? Any help appreciated.

问候和放大器; TIA

Regards & TIA

推荐答案

只是为了阐述redsquare的答案，你需要你的jQuery改变这个...

Just to elaborate on redsquare's answer, you would need to change your jQuery to this...:

$(function() {
    /** 
        ...What ever else you might have onload... 
    **/
    $("a[name='logout']").live('click',function() {  // Now using the .live() event
        $.post("logout.php", function(data) {
            $("li.login").html(data);
            bind_login_submit();     // <---- Notice, this is new
        });
    });
    bind_login_submit();    // Call this function to initially bind the submit
});

function bind_login_submit() {
    $("form#login").unbind('submit').bind('submit',function() {
        var usernameVal = $("input[name='username']").val();
        var passwordVal = $("input[name='password']").val();

        $.post("login.php",{username : usernameVal, password : passwordVal}, function(data) {
            $("li.login").html(data);
        });
        return false;
    });
}

这篇关于jQuery和放大器; AJAX登录表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！