Question

我有一个loginout.php，如：

<?php if($isLoggedIn) { ?>
<form method="POST" action="" name="logoutForm" id="logoutForm" accept-charset='UTF-8'>
    <input type='hidden' name='submitted' id='submitted' value='1'/>
    <input type="submit" name="logout" value="Logout" />
</form>
<? } else { ?>
<form method="POST" action="" name="loginForm" id="loginForm" accept-charset='UTF-8'>
    <input type='hidden' name='submitted' id='submitted' value='1'/>
    Email:    <input type="text"     name="usr" /><br />
    Password: <input type="password" name="pw"  /><br />
    <input type="submit" name="login" value="Login" />
</form>
<? }?>

像

这样的div

<div id="loginLogoutDiv"></div>

以及jquery代码：

$(document).ready(function(){
    $('#loginLogoutDiv').load('loginout.php');
    $('#loginForm, #logoutForm').live('submitted', function() {
        $.post('loginout.php', $(this).serialize(), function (
        data, textStatus) {
            $('#loginLogoutDiv').html(data);
        });
        return false;
    });
});

如果按下“登录”按钮会出现什么问题，那么整个页面会刷新我不想要的内容？

谢谢

Answer 1

替换：

$('#loginForm, #logoutForm').live('submitted', function() { 
    ...

使用

$('#loginForm, #logoutForm').submit(function(event) {
    event.preventDefault();
    ...

所以你得到......

$(function(){
    $('#loginLogoutDiv').load('loginout.php');
    $('#loginForm, #logoutForm').submit(function(event) {
        event.preventDefault();
        $.post('loginout.php', $(this).serialize(), function (
        data, textStatus) {
            $('#loginLogoutDiv').html(data);
        });
        return false;
    });
});

Answer 2

您要附加的事件称为submit，而不是submitted。

此外，检查您的控制台是否存在javascript中的错误 - 如果您的脚本因return false处理程序中的onsubmit之前的错误而终止，则不会阻止默认行为。

Answer 3

我会这样做（意思是JS）：

$(document).ready(function(){
    $('#loginLogoutDiv').load('loginout.php');
    $('#loginForm, #logoutForm').submit(function(e) {
        e.preventDefault(); // this will prevent the page to really do a submit
        $.post('loginout.php', $(this).serialize(), function (
        data, textStatus) {
            $('#loginLogoutDiv').html(data);
        });
    });
});

如果您需要使用live()，则应该这样做：

$(document).ready(function(){
    $('#loginLogoutDiv').load('loginout.php');
    $('#loginForm, #logoutForm').live('submit', function(e) {
        e.preventDefault(); // this will prevent the page to really do a submit
        $.post('loginout.php', $(this).serialize(), function (
        data, textStatus) {
            $('#loginLogoutDiv').html(data);
        });
    });
});

登录div而不刷新

3 个答案: