最近在写 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. druid 参数配置详解

    druid 参数配置详解 */--> druid 参数配置详解 Table of Contents 1. 初始化连接 2. 参数配置及说明 3. 注意事项 3.1. 底层连接 3.2. 空闲检查 ...

  2. 用SQL语句操作Sqlite数据库的示例代码

    import android.content.Context; import android.database.sqlite.SQLiteDatabase; import android.databa ...

  3. Python3+RobotFramewok RIDE环境搭建(一)

    工欲善其事,必先利其器,RIDE目前可以比较稳定的支持python3了,这里简单介绍一下环境的部署,建议多看看读一读官方文档,对能力提升很有帮助,很简单的三步: (1)安装python3,不详细介绍了 ...

  4. 白盒测试 && 接口测试 && 自动化测试

    一.什么是白盒测试 白盒测试是一种测试策略,这种策略允许我们检查程序的内部结构,对程序的逻辑结构进行检查,从中获取测试数据.白盒测试的对象基本是源程序,所以它又称为结构测试或逻辑驱动测试,白盒测试方法 ...

  5. 三分钟读懂TT猫分布式、微服务和集群之路 (转)

    http://www.cnblogs.com/smallSevens/p/7501932.html 针对新手入门的普及,有过大型网站技术架构牛人路过,别耽误浪费了时间,阅读之前,请确保有一定的网络基础 ...

  6. vue如何获取并操作DOM元素

    原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...

  7. htop/dstat/top/ps命令的使用

    top命令 ​ 显示系统中进程信息 [root@node0 ~]# top top - 09:36:45 up 13:39, 3 users, load average: 0.02, 0.03, 0. ...

  8. 将其它部分jsp代码包含进一个jsp文件

    <jsp:include page="文件路径/文件名.jsp" /> 将其它部分jsp代码包含进来.意义:将公共的部分代码抽出来,省略过多复制粘贴:只要改一个地方就O ...

  9. Centos 7 忘记密码的情况下,修改root密码

    应用场景 linux管理员忘记root密码,需要进行找回操作. 注意事项:本文基于centos7.4环境进行操作,由于centos的版本是有差异的,继续之前请确定好版本 操作步骤 一.重启系统,在开机 ...

  10. ZOJ Problem Set - 1002

    参考: 1.http://www.cnblogs.com/phinecos/archive/2008/09/18/1293017.html 基本思想:回溯法 重点在void Solve(int k,i ...