Ajax to php - javascript events not firing

Question

我相信這對你們來說很容易，但我正在爲這件事而煩惱。試圖在這裏做一個簡單的ajax post請求到一個php文件。

我可以看到ajax請求正在工作，因爲我從我的php腳本中獲取有效數據（我通過將結果回顯給頁面進行驗證）。但是，我的ajax回調沒有解僱。請看下圖：

的Javascript：

var request; 
$(document).ready(function() { 
    $('#loginform').submit(function(e) { 

     if (request) 
      request.abort(); 

     var $form = $(this); 
     var $inputs = $form.find("input, select, button"); 
     $inputs.prop("disabled", true); 

     var serializedData = $form.serialize(); 

     request = $.ajax({ 
      url: "/login.php", 
      type: "post", 
      data: serializedData, 
      timeout: 10000, 
      success: function() { 
       alert("success"); 

      // $("#result").html('Submitted successfully'); 
      }, 
      error: function() { 
       alert("failure"); 
       // $("#result").html('There is error while submit'); 
      } 
    }); 
}); 

PHP

<?php echo 'foo'; exit(); ?> 

我幾乎覺得自己很蠢問這個考慮也有實例的個數，但我不能讓這對我的生活工作。建議？

編輯 附送HTML（大多數CSS類是從引導BTW）

<div style='background-color: #193048; width: 100%; height: 500px; background-repeat: no-repeat; background-position: center center; background-size: cover;'> 
<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-4 col-md-offset-4"> 
      <h1 class="text-center login-title whiteFont">Sign in to continue</h1> 
      <div class="account-wall"> 
       <div align='center'> 
        <img class="profile-img" align='center' src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" 
         alt=""> 
       </div> 

       <form id="loginform" class="form-signin" method="post" >   
        <input type="text" name='emailTxt' class="form-control" placeholder="Email" required autofocus> 
        <input type="password" name="passTxt" class="form-control" placeholder="Password" required>  
        <button class="btn btn-lg btn-primary btn-block" type="submit" value="login" id="loginBtn" > 
         Sign in</button> 
        <label class="checkbox pull-left"> 
         <input type="checkbox" value="remember-me" > 
         <label class="whiteFont">Remember me</label> 
        </label> 
        <a href="#" class="pull-right need-help"><label class="whiteFont">Need Help?</label></a><span class="clearfix"></span> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

.submit是最有可能導致回發，取消你的JS。將preventDefault添加到您的函數的開頭：

e.preventDefault(); 

Answer 2

您需要將數據從服務器返回作爲參數傳遞給你的回調

var request; 
$(document).ready(function() { 
    $('#loginform').submit(function(e) { 

    if (request) 
     request.abort(); 

    var $inputs = $form.find("input, select, button"); 
    $inputs.prop("disabled", true); 

    var $form = $(this); 
    var serializedData = $form.serialize(); 

    request = $.ajax({ 
     url: "/login.php", 
     type: "post", 
     data: serializedData, 
     timeout: 10000, 
     success: function(data, status, xhr) { // <---- changes made here 
      alert("success"); 

     // $("#result").html('Submitted successfully'); 
     }, 
     error: function() { 
      alert("failure"); 
      // $("#result").html('There is error while submit'); 
     } 
    }); 
});