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