jQuery的AJAX .POST不工作自举

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

这是一个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发挥预期。

的关键是改变“提交”按钮“，而不是仅仅删除类型分配都在一起。如果没有指定类型，默认键键入“提交”

Answer 2

您应该在发送您的$.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}); 
    }); 
});