最近在写 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"为阻止表单提交事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script>

         function func(){

             return false;

         }

     </script>

 </head>

 <body>

     <form action="" onsubmit="return func()">

         <input type="submit" value="button" />

     </form>

 </body>

 </html>

防止表单提交时刷新页面-阻止form表单的默认提交行为的更多相关文章

  1. 不使用Ajax，如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  2. 阻止form表单提交的问题

    阻止form表单提交这种场景可能在生活中,我们经常碰到,而在我们第一印象里面可能我们用return false 去阻止表单默认行为. 但是,有中情况我们用return false 不能阻止表单提交 & ...

  3. 关于微信小程序返回页面时刷新页面的实现

    在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...

  4. asp.net使用post方式action到另一个页面，在另一个页面接受form表单的值！（报错，已解决！）

    原文:asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!) 我想用post的方式把一个页面表单的值,传到另一个页面.当我点击Default.as ...

  5. Django 11 form表单（状态保持session、form表单及注册实现）

    Django 11 form表单(状态保持session.form表单及注册实现) 一.状态保持 session 状态保持 #1.http协议是无状态的:每次请求都是一次新的请求,不会记得之前通信的状 ...

  6. Form表单中的action路径问题，form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关

    Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com  网友分享于:  2014-08-14 08:08:01     浏览数44525次 ...

  7. js阻止表单默认提交、刷新页面

    一.阻止刷新页面 在表单中的提交按钮<button></button>标签改为<input type="button">或者在<butto ...

  8. form表单提交不刷新页面的方法

    方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post"  onsubmi ...

  9. 【记录】解决前端form表单回车禁止刷新页面

    最近弄前端 有form表单的情况下 按回车会自动刷新当前页面. 现记录解决方案如下: 1.去掉表单 2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行) 3.以上两点都不想使用,那么就还可以在表 ...

随机推荐

  1. Android省电和提高效率

    一．Android省电开发之性能优化 电量优化 Android应用开发中的网络.定位.传感器等都是比较耗电的特性,我们应该正确使用API来有效降低应用的耗电量. 1.BroadcastReceiver ...

  2. @Transactional（事务讲解）和springboot 整合事务

    概述 事务在编程中分为两种:声明式事务处理和编程式事务处理 编程式事务处理:编码方式实现事务管理,常与模版类TransactionTemplate(推荐使用) 在业务代码中实现事务. 可知编程式事务每 ...

  3. LC 529. Minesweeper

    Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix representin ...

  4. 对每个CheckBox的循环

    $("input[name='ck2']").each(function(){ if(this.checked == false){ $(this).parent().parent ...

  5. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-1.数据信息安全--微信授权一键登录功能介绍

    笔记 1.数据信息安全--微信授权一键登录功能介绍 简介:讲解登录方式优缺点和微信授权一键登录功能介绍         1.手机号或者邮箱注册             优点:              ...

  6. Python3 循环_break和continue语句及循环中的else子句

    break和continue语句及循环中的else子句break语句可以跳出for和while的循环体.如果你从for或while循环中终止,任何对应的循环else块将不执行. continue语句被 ...

  7. Centos7 搭建Svn+Apache服务器

    Svn客户端搭建 1.yum install subversion 2.查看安装版本 svnserve --version 3.创建SVN版本库目录 mkdir -p /opt/svn 4.创建版本库 ...

  8. Postman的安装和升级

    安装postman Postman本地应用程序 Postman可以作为Mac,Windows和Linux操作系统的本地应用程序. 要安装Postman,请转到应用界面,并根据你的平台点击Mac/Win ...

  9. 鸟哥私房菜基础篇：磁碟配额(Quota)与进阶文件系统管理习题

    猫宁!!! 参考:http://cn.linux.vbird.org/linux_basic/0420quota.php 1-在前一章的第一个大量新增帐号范例中, 如果我想要让每个用户均具有 soft ...

  10. 【AMAD】django-allauth

    简介 个人评分 简介 django-allauth1集成的Oauth API包括: Amazon (OAuth2) AngelList (OAuth2) Bitly (OAuth2) Dropbox ...