jQuery AJAX .Post 无法使用 Bootstrap答案

【问题标题】：jQuery AJAX .Post Not Working With BootstrapjQuery AJAX .Post 无法使用 Bootstrap
【发布时间】：2013-03-12 14:43:55
【问题描述】：

如果我使用传统的 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});
    });
});

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

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

【问题讨论】：

您并没有阻止默认操作，因此正常的表单提交发生在您启动 ajax 请求导致请求中止之后。
您是否检查过控制台以查看是否实际发送了帖子？反应是什么？该代码在收到服务器的响应后什么都不做，这是故意的吗？哦，凯文 B 说的
@KevinB 是对的。或者，您可以将提交按钮从 type="submit" 更改为 type="button"，它将不再尝试重定向。

标签： jquery ajax twitter-bootstrap

【解决方案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});
    });
});

【讨论】：

嗨，Kevin，我添加了 event.preventDefault()，但帖子仍未提交。有什么其他的想法可能是错的吗？
是的，它与 PHP 无关，因为我可以在没有 AJAX 的情况下提交表单
这并不一定意味着没有发生 php 问题。在 php 方面，检查使用 ajax 发出请求时可用的数据。

【解决方案2】：

它是 jQuery val() 方法和 Bootstrap 的 btn 类的组合，默认使用它设置样式的按钮作为提交按钮。我换了

    var user_name = $("#user_name").val();
    var password = $("#password").val();

到

    var user_name = document.getElementById("user_name").value;
    var password = document.getElementById("password").value;

和

<button type="submit" class="btn" id="submit_login">

到

<button type="button" class="btn" id="submit_login">

并且 AJAX 按预期工作。

关键是将“提交”更改为“按钮”，而不仅仅是一起删除类型分配。如果未指定类型，则按钮默认键入“提交”

【讨论】：