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

问题描述：

I have been struggling with understanding AJAX so I would appreciate some help. I pulled this example from the world wide web but it not behaving as I expected.

This form is posting the data as expected but the upon submit the .php page is loading. Ideally I would like to just post a "Success" message below the Submit button and not move pages. Thoughts?

<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>

我一直在努力理解AJAX，所以我很感激一些帮助。我从万维网上提取了这个例子，但它的表现并不像我预期的那样。 p>

此表单按预期发布数据但是提交.php页面时正在加载。理想情况下，我想在“提交”按钮下面发布“成功”消息，而不是移动页面。想法？ p>

 ＆lt; div style =“padding：3px 2px; border-bottom：1px solid #ccc”＆gt;添加新的受邀者＆lt; / div＆gt; 
＆lt;表单 id =“ff”action =“addinvite.php”method =“post”＆gt; 
＆lt; table＆gt; 
＆lt; tr＆gt; 
＆lt; td＆gt;名字：＆lt; / td＆gt; 
＆lt; td＆gt;  ＆lt; input name =“fname”type =“text”＆gt;＆lt; / input＆gt;＆lt; / td＆gt; 
＆lt; / tr＆gt; 
＆lt; tr＆gt; 
＆lt; td＆gt;姓氏：＆lt; /  td＆gt; 
＆lt; td＆gt;＆lt; input name =“lname”type =“text”＆gt;＆lt; / input＆gt;＆lt; / td＆gt; 
＆lt; / tr＆gt; 
＆lt; tr＆gt; 
＆lt;  td＆gt;电话：＆lt; / td＆gt; 
＆lt; td＆gt;＆lt;输入名称=“电话”类型=“文字”＆gt;＆lt; / input＆gt;＆lt; / td＆gt; 
＆lt; / tr＆gt; 
＆lt;  ; tr＆gt; 
＆lt; td＆gt;＆lt; / td＆gt; 
＆lt; td＆gt;＆lt; input type =“submit”value =“Submit”＆gt;＆lt; / input＆gt;＆lt; / td＆gt; 
＆lt; /  tr＆gt; 
＆lt; / table＆gt; 
＆lt; / form＆gt; 
 
＆lt; script＆gt; 
 $（'＃ff'）。form（{
 success：function（data）{
 $ .messager.alert  （'信息'，数据，'信息'）; 
} 
}）; 
＆lt; / script＆gt; 
  code>  pre> 
   DIV>

答

the default behavior of a form is to redirect after submit. And if you want to use AJAX you should prevent the default behavior because AJAX is a web development technique that can send/retrieve data from server without interfering with display and behavior of the existing page.

If you're using a button it's okay not to prevent the default behavior but if you're using form and submit you should do something like this:

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

   //my ajax here and etc
});

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

相关推荐