爲什麼我的AJAX表單仍在加載我的PHP頁面？

Question

我一直在努力理解AJAX，所以我會很感激一些幫助。我從萬維網上拉出了這個例子，但它不像我預期的那樣。

此表格按預期的方式發佈數據，但在提交.php頁面時正在加載。理想情況下，我想只在提交按鈕下方發佈「成功」消息，而不是移動頁面。思考？

<div style="padding:3px 2px;border-bottom:1px solid #ccc">Add a New Invitee</div> 
<form id="ff" action="addinvite.php" method="post"> 
<table> 
    <tr> 
     <td>First Name:</td> 
     <td><input name="fname" type="text"></input></td> 
    </tr> 
    <tr> 
     <td>Last Name:</td> 
     <td><input name="lname" type="text"></input></td> 
    </tr> 
    <tr> 
     <td>Phone:</td> 
     <td><input name="phone" type="text"></input></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td><input type="submit" value="Submit"></input></td> 
    </tr> 
</table> 
</form> 

<script> 
$('#ff').form({ 
    success:function(data){ 
    $.messager.alert('Info', data, 'info'); 
} 
}); 
</script> 

Answer 1

表單的默認行爲是在提交後重定向。如果你想使用AJAX，你應該防止默認行爲，因爲AJAX是一種Web開發技術，可以從服務器發送/檢索數據，而不會干擾現有頁面的顯示和行爲。

如果你使用一個按鈕，它沒關係不阻止默認行爲，但如果你使用的表格，並提交你應該做這樣的事情：

$('form').on('submit',function(e){ 
    e.preventDefault(); //prevent the default behavior 

    //my ajax here and etc 
});