防止表单提交时刷新页面-阻止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"为阻止表单提交事件
<!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表单的默认提交行为的更多相关文章
- 不使用Ajax,如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- 阻止form表单提交的问题
阻止form表单提交这种场景可能在生活中,我们经常碰到,而在我们第一印象里面可能我们用return false 去阻止表单默认行为. 但是,有中情况我们用return false 不能阻止表单提交 & ...
- 关于微信小程序返回页面时刷新页面的实现
在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...
- asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!)
原文:asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!) 我想用post的方式把一个页面表单的值,传到另一个页面.当我点击Default.as ...
- Django 11 form表单(状态保持session、form表单及注册实现)
Django 11 form表单(状态保持session.form表单及注册实现) 一.状态保持 session 状态保持 #1.http协议是无状态的:每次请求都是一次新的请求,不会记得之前通信的状 ...
- Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关
Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com 网友分享于: 2014-08-14 08:08:01 浏览数44525次 ...
- js阻止表单默认提交、刷新页面
一.阻止刷新页面 在表单中的提交按钮<button></button>标签改为<input type="button">或者在<butto ...
- form表单提交不刷新页面的方法
方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post" onsubmi ...
- 【记录】解决前端form表单回车禁止刷新页面
最近弄前端 有form表单的情况下 按回车会自动刷新当前页面. 现记录解决方案如下: 1.去掉表单 2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行) 3.以上两点都不想使用,那么就还可以在表 ...
随机推荐
- Git入门之在IDEA中使用Git上传maven项目
下载安装git客户端: 参考博文:https://www.cnblogs.com/java-maowei/p/5950930.html 在IDEA怎么使用git上传spring的maven项目详解: ...
- spark简单快速学习及打开UI界面---1
1.远程集群测试 import org.apache.spark.{SparkContext, SparkConf} import scala.math.random /** * 利用spark进行圆 ...
- IDEA类和方法注释模板设置(非常详细)
一.首先我们来设置IDEA中类的模板:(IDEA中在创建类时会自动给添加注释) 1.File-->settings-->Editor-->File and Code Template ...
- kettle mogodb output详解
以下主要来自官网文档,原文:https://wiki.pentaho.com/display/EAI/MongoDB+Output Configure Connection Tab 1 Host na ...
- const成员变量
#include <iostream> using namespace std; class A { public: A(int size) : SIZE(size) {}; privat ...
- 从Myeclipse到IntelliJ IDEA-——让你摆脱鼠标,全键盘操作
注:本文是对原文章(https://blog.csdn.net/luoweifu/article/details/13985835)做的补充 快捷键对比 Myeclipse IDEA 说明 Ctrl+ ...
- 学校或公司转ISP -boardband (上网公司)注意事项记录
如果学校或公司轉boardband , 1. 要更新 domain IP (亦可以轉移domain 去新ISP公司, 要HKDNR 登入名稱和密碼,可問舊ISP即boardband 公司或域名管理方要 ...
- python 读取文件夹中所有同类型的文件 并用pandas合并
import globimport osimport pandas as pd read_path = 'D:/Data' # 要读取的文件夹的地址read_excel = glob.glob(os. ...
- 【VS开发】【C/C++开发】C++参数策略传递内存
参数策略 如果函数的参数是一个指针,不要指望用该指针去动态申请内存.如下: void GetMemory(char *p, int num) { p = (char *)malloc(sizeof(c ...
- vue-cli3 取消eslint 校验代码 真正的解决办法
在网上找了各种办法都没解决,看了下文档就解决了 关闭vue-cli3.0 报错:eslint-disable-next-line to ignore the next line. 注意我这里是VU ...