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

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

1 个答案: