防止表单提交时刷新页面-阻止form表单的默认提交行为

80 阅读 0 评论 53 点赞

我是靠谱客的博主故意雪糕，最近开发中收集的这篇文章主要介绍防止表单提交时刷新页面-阻止form表单的默认提交行为，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近在写 ajax 提交的时候遇到一个问题，在执行 ajax 提交之后，浏览器页面自动刷新了，主要是没有由于form 表单的默认提交行为。一下是几种阻止 form 表单默认提交行为的方式。

1.使用button 按钮提交表单的时候，要设置type="button" button在浏览器中默认的类型为submit；

2.使用input 代替button ，设置type="button"

3.event.preventDefault(); 在提交事件绑定的方法的最后使用event.preventDefault();方法；

4.用onclick点击事件来return false

讲一下表单提交按钮onclick事件：

οnclick="return true" ；默认的表单提交事件
οnclick="return false"；阻止表单提交事件

只需要在onlick 绑定的方法func最后添加return false；标签中的onclick 属性要写成 οnclick="return func();" 一定要加return；

5.利用表单的onsubmit事件
注意：onsubmit事件的作用对象为<form>，所以把onsubmit事件加在提交按钮身上是没有效果的。
form对象的onsubmit事件类似onclick,都是先处理调用的函数，再进行表单是否跳转布尔值的判断
οnsubmit="return true" 为默认的表单提交事件
οnsubmit="return false"为阻止表单提交事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4
<meta charset="UTF-8">
 5
<title>Document</title>
 6
<script>
 7
function func(){
 8
return false;
 9 
}
10
</script>
11 </head>
12 <body>
13
<form action="" onsubmit="return func()">
14
<input type="submit" value="button" />
15
</form>
16 </body>
17 </html>