ajax表單提交，我哪裏錯了？

Question

我正在嘗試使用ajax提交密碼更改，以便能夠在更改後保留在相同的ui.tab頁面上，並提供視覺反饋。 如果我在表單中留下action =「change_password_do.php」，那麼我可以更改密碼，這樣php文件就可以工作。如果我在表單中放置action =「」，我什麼也得不到。 顯然，在我的ajax中有一個基本的錯誤，但我無法找到它。有人能指點我嗎？

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#new_password_submit').click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "change_password_do.php", 
      data: $("form.pw_todo").serialize() 
     }); 
    }); 
}); 
</script>      

<div id="tabs_6" class="tabs"> 
     <h2 class="tablecaption">Change your password</h2> 

     <form id="change_pass" class="pw_todo" method="post" action=""> 

      <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password"/><br /> 
      <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password"/><br /> 
      <input type="submit" id="new_password_submit" value="Submit" class="button"/> 

     </form> 
</div> 

Answer 1

您需要通過返回false從點擊處理程序取消按鈕的默認操作：

$('#new_password_submit').click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "change_password_do.php", 
     data: $("form.pw_todo").serialize() 
    }); 
    return false; // <-- That's very important 
}); 

作爲替代方案，你可以取消這樣的默認操作：

<script type="text/javascript"> 
$(document).ready(function(evt) { 
    $('#new_password_submit').click(function() { 
     evt.preventDefault(); // <-- That's very important 

     $.ajax({ 
      type: "POST", 
      url: "change_password_do.php", 
      data: $("form.pw_todo").serialize() 
     }); 
    }); 
}); 
</script> 

由於new_password_submit是一個提交按鈕，如果您在點擊按鈕時未取消點擊處理程序中的默認操作，則表單將被提交，瀏覽器將redi直接離開頁面，沒有時間讓AJAX請求執行。

這就是說我建議你訂閱表單的.submit事件，而不是提交按鈕的.click事件。這樣你就可以保證AJAX請求將始終執行。請記住，除了點擊提交按鈕之外，可以通過其他方式提交表單。例如，表單可以由用戶在某些輸入字段內按下輸入鍵提交。如果他以這種方式提交表單，則AJAX請求將永遠不會執行。

所以，這裏是我推薦的解決方案：

$('#change_pass').submit(function(evt) { 
    evt.preventDefault(); // <-- That's very important 

    $.ajax({ 
     type: this.method, 
     url: this.action, 
     data: $(this).serialize() 
    }); 
}); 

然後確保你已經設置表單上的action屬性：

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php"> 

現在所有的JavaScript做的是不顯眼AJAXifying提交的形式。如果用戶禁用JavaScript，您的代碼仍然可以使用。

Answer 2

我覺得你不需要使用任何形式或提交按鈕因爲您通過AJAX已經傳遞自己的價值觀，直接傳遞值的$.ajax();數據屬性，並繼續你的AJAX方法。

<script type="text/javascript"> 
$(document).ready(function() {  
    $('#new_password_submit').click(function(){ 
     $.ajax({ 
     type: "POST", 
     url: "change_password_do.php", 
     data: {'password1': $('#password1').val(), 
       'password2': $('#password2').val()} 
     }); 
    }); 
}); 
</script>      

<div id="tabs_6" class="tabs"> 
     <h2 class="tablecaption">Change your password</h2> 

      <input class="formlogin" type="password" name="password1" placeholder="New Password" title="Type in your New Password" id="password1"/><br /> 
      <input class="formlogin" type="password" name="password2" placeholder="Re-enter New Password" title="Re-type your New Password" id="password2"/><br /> 
      <input type="button" id="new_password_submit" value="Submit" class="button"/> 

</div> 

注意：我剛纔添加的ID password1和password2爲了您的方便

Answer 3

你不得不取消提交事件，否則表格將仍然可以正常提交，Ajax調用之前。

$('#new_password_submit').click(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      .... 

接下來你缺少ajax調用的成功函數，所以如果它起作用的話，你至少不會注意到它。

最後，檢查一下jQuery form plugin，它確實是你要找的。沒有什麼奇特的，但它有用，如果你需要它很多

Answer 4

不要綁定按鈕的點擊事件，更好地綁定形式的提交事件。

<script type="text/javascript"> 

$(function() { 
    $('#change_pass').submit(function(e) { 

     // this will prevent default form behaviour 
     e.preventDefault() 

     $.ajax({ 
      type: "POST", 
      url: $(this).attr('action'), 
      data: $(this).serialize(), 
      success: function(data){ 

       // consider displaying some message on success 

      } 
     }); 
    }); 
}); 

</script> 

<form id="change_pass" class="pw_todo" method="post" action="change_password_do.php"> 

... 

</form>