为什么我的AJAX表单仍在加载我的PHP页面？

我一直在努力理解AJAX，所以我希望能得到一些帮助。我从万维网（world wide web）上获取了这个示例，但它的行为并不像我预期的那样

此表单正在按预期发布数据，但正在加载提交时的.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>

添加新的被邀请者
名字：
姓氏：
电话：
$（'#ff'）。表格({
成功：功能（数据）{
$.messager.alert（'Info'，data，'Info'）；
}
});

表单的默认行为是在提交后重定向。如果您想使用AJAX，您应该防止默认行为，因为AJAX是一种web开发技术，可以从服务器发送/检索数据，而不会干扰现有页面的显示和行为

如果使用按钮，可以不阻止默认行为，但如果使用表单并提交，则应执行以下操作：

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

   //my ajax here and etc
});

---

这就是为什么，只是不要复制和粘贴代码片段..谢谢Drixson，这很有帮助。我还有很长的路要走。