• 防止表单提交时刷新页面-阻止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事件:

    onclick="return true" ;默认的表单提交事件
    onclick="return false";阻止表单提交事件

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

    5.利用表单的onsubmit事件
    注意:onsubmit事件的作用对象为<form>,所以把onsubmit事件加在提交按钮身上是没有效果的。
    form对象的onsubmit事件类似onclick,都是先处理调用的函数,再进行表单是否跳转布尔值的判断
    onsubmit="return true" 为默认的表单提交事件
    onsubmit="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>
  • 相关阅读:
    用nodejs删除mongodb中ObjectId类型数据
    关于easyui模拟win2012桌面的一个例子系列
    div里常用的class命名
    XMLHttpRequest对象中readyState与status的几种常见状态
    我们经常注册用的页面是怎么实现的
    html与xhtml区别
    mysql重置密码
    服务器80端口映射到8080端口
    服务器端增加tomcat使用内存
    更新服务器ssh登录端口
  • 原文地址:https://www.cnblogs.com/wangyuliang/p/10923126.html
Copyright © 2020-2023  润新知