javascript - 即使 .submit() 返回 false，提交按钮也会刷新页面

Question

我正在制作一个不需要页面刷新的论坛。它进展顺利，除了登录尝试失败时，页面会重新加载。

我已经完成了所有的谷歌搜索，发现我的 jQuery 在 .submit 事件上“返回 false”应该会阻止重新加载，但事实并非如此!这是代码:

HTML:

<div id='sidebar'>
<p>Login</p>
<form id='login'>
    <input class='logininfotext' type='text' id='login_username' placeholder='username'/>
    </br>
    <input class='logininfotext' type='password' id='login_password' placeholder='password'/>
    </br>
    <input name='loginbutton' type='submit' value='login'/>
</form>
</div>

CSS:

#sidebar {
    font-size: 12px;
    position: fixed;
    color: white;
    top: 227px;
    left: 90%;
    width: 9.5%;
    background-color: rgba(12,35,44,0.6);
    border: 2px solid #3D89A4;
    font-family: Minecraft;
}    
.logininfotext {
    width: 100px;
}
.error {
    padding: 6px;
    border: 1px solid rgba(123, 29, 29, 0.7);
    border-radius: 4px;
background-color: rgba(245, 83, 83, 0.5);
font-size: 10px;
color: #916E6E;
}

Javascript/JQuery:

//saves all userdata of current session to the user object.
function saveuserdata() {
    var session_user_data = JSON.parse(get_data("#sidebar", "php/sqlquery.php", "session_user_data"));
    user.username=session_user_data[0];
    user.password=session_user_data[1];
    var session_user_data2=JSON.parse(get_data("#sidebar", 'php/sqlquery.php', 'Userdata', user.username));
    user.picture=session_user_data2[0]['Picture'];
    user.posts=session_user_data2[0]['Posts'];

//reprints the login form, supposedly adding whatever html to the end I want for error support
function loginform(extrastring) {
    var loginform = "<p>Login</p><form id='login'><input class='logininfotext' type='text' id='login_username' placeholder='username'/></br>";
    loginform += "<input class='logininfotext' type='password' id='login_password' placeholder='password'/></br><input id='loginbutton' type='submit' value='login'></form>";
    if (typeof(extrastring)=='string') {
    loginform += extrastring;
    }
    $("#sidebar").html(loginform);
}

$('#sidebar').submit(function() {
    var test=true //normally, this would be a call to php to check if the user logged in successfully or not.  I know my php is working, but my problem is I don't want the page reloading
    user.username=$('#login_username').val();
    user.password=$('#login_password').val();
    if (test=true) {
        saveuserdata();
        $("#sidebar").html("<p class='username'>"+user.username+"</p><img width='125px' height='125px' src='"+user.picture+"'/><p>Posts: "+user.posts+"</td><div id='logout'>logout</div>");
    } else {
        loginform("<p class='error'>Username or Password incorrect!</p>");
    }
    return false;
});

非常感谢您的帮助。我意识到很难弄清楚这里到底发生了什么。如果您想查看完整内容，请成为我的客人:http://lampitosgames.com/forum/index.php

Answer 1

尝试使用preventDefault

$('#sidebar').submit(function(e) {
    e.preventDefault();
    var test=true //normally, this would be a call to php to check if the user logged in successfully or not.  I know my php is working, but my problem is I don't want the page reloading
    user.username=$('#login_username').val();
    user.password=$('#login_password').val();
    if (test=true) {
        saveuserdata();
        $("#sidebar").html("<p class='username'>"+user.username+"</p><img width='125px' height='125px' src='"+user.picture+"'/><p>Posts: "+user.posts+"</td><div id='logout'>logout</div>");
    } else {
        loginform("<p class='error'>Username or Password incorrect!</p>");
    }
});