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});
    });
});

但这不是发布，我的会话没有开始。我打印了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});
    });
});

Answer 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按预期工作。

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

jQuery AJAX .Post不能使用Bootstrap

2 个答案: