解决表单提交页面自动刷新问题


Bug重现:

方式一

将<input>标签内的按钮类型从 type="submit" 修改为type="button"

方式二

表单内的<button>未指定类型,默认的类型为submit (除了IE浏览器是 button), 可以显示的修改为<button type="button"></button>来阻止表单提交事件

方式三

事件阻止: preventDefault()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func(event){
            event.preventDefault();
            //执行ajax动作
        }
    </script>
</head>
<body>
    <form action="">
        <input type="submit" value="button" onclick="func(event)" /> 
    </form>
</body>
</html>

方式四

用onlick点击事件来return false
1. onclick="return true" 为默认的表单提交事件
2. onclick="return false"为阻止表单提交事件
而一般用onclick来调用函数都是没有返回值的,所以一般调用完成后为默认return true;所以才会看到,先处理回调函数后再进行表单提交跳转

方式四

利用表单的onsumit事件
注意: onsubmit 事件作用对象是

所以把onsubmit事件加在提交按钮上是没效果的

form对象的onsubmit事件类似onclick,都是先处理调用的函数,再进行表单是否跳转布尔值的判断
1. onsubmit="return true" 为默认的表单提交事件
2. onsubmit="return false"为阻止表单提交事件

    <form id="frm" theme="simple" onsubmit="return false;"></form>

选择时间


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM