jQuery AJAX .Post 无法与 Bootstrap 一起使用

Question

如果我使用传统的 html 表单帖子提交，我有一个登录表单，该表单可以正常工作

<form class="form-horizontal" id="loginform">
    <div class="control-group">
        <label class="control-label" for="user_name">
            Username or E-Mail
        </label>
        <div class="controls">
            <input type="text" id="user_name" name="user_name" autofocus>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">
            Password
        </label>
        <div class="controls">
            <input type="password" id="password" name="password">
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox">Remember me
            </label>
            <br>
            <button type="submit" class="btn" id="submit_login">
                Sign-in
            </button>
        </div>
    </div>
</form>

我希望用户登录并停留在同一页面上，而不是进行页面重定向。我有下面的 jQuery 来执行此操作

$(document).ready(function(){
    $("#submit_login").click(function(){
        var user_name = $("#user_name").val();
        var password = $("#password").val();
        $.post("login.php", {user_name: user_name, password: password});
    });
});

但这不是发布，我的 session 也没有开始。我已经打印了 jQuery 'user_name' 和 'password' 变量，它们从表单中提取了正确的值。 “login.php”文件查找的变量也是“user_name”和“password”。当我运行脚本时没有控制台错误。

是什么原因导致这里断开连接？

Answer 1

您应该在发送 $.post 之前立即阻止默认操作，以避免默认表单提交，否则您的 $.post 将(在大多数情况下)被中止.

$(document).ready(function(){
    $("#submit_login").click(function(event){
        event.preventDefault(); // stop form submit
        var user_name = $("#user_name").val();
        var password = $("#password").val();
        $.post("login.php", {user_name: user_name, password: password});
    });
});