jquery项目中如何防重复提交详解
在新项目中，axios能实现防重复提交的功能，不过老项目（例如jQuery）的项目中，没有axios。但是导入Ajax-hook
就可以实现
Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook
导入
<script src="https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.min.js"></script>
ah对象是在导入ajaxhook.min.js后就会出现的，使用：
ah.proxy({
//请求发起前进入
onRequest: (config, handler) => {
console.log(config.url)
handler.next(config);
},
//请求发生错误时进入，比如超时；注意，不包括http状态码错误，如404仍然会认为请求成功
onError: (err, handler) => {
console.log(err.type)
handler.next(err)
},
//请求成功后进入
onResponse: (response, handler) => {
console.log(response.response)
handler.next(response)
}
})
其中，config.method为ajax请求的方式（GET/POST），config.url为请求的路径。onError中的err对象和onResponse中的response可以通过err.config.method/response.config.method来获得ajax的请求方式。
我稍微封装了一下，实现防重复提交的js文件，亲测有效，朋友们可以后再测试一下，欢迎各路大神谈论和指出不足。
```javascript
function laodJS(url, callback) {
var script = document.createElement('script');
fn = callback || function() {};
script.type = 'text/javascript';
script.defer = true;
// IE
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
fn();
}
}
} else {
// 其他浏览器
script.onload = function() {
fn();
}
}
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
}
laodJS('https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.min.js', function() {
let ajaxArr = []
ah.proxy({
//请求发起前进入
onRequest: (config, handler) => {
var id = config.method + config.url
if (ajaxArr.indexOf(id) === -1) {
// 给每个请求设置唯一ID，push到ajaxArr里。在请求完成时再移除那个项
ajaxArr.push(id)
handler.next(config);
} else {
return handler.reject()
}
},
//请求发生错误时进入，比如超时；注意，不包括http状态码错误，如404仍然会认为请求成功
onError: (err, handler) => {
var id = err.config.method + err.config.url
if (ajaxArr.indexOf(id) !== -1) {
ajaxArr.splice(ajaxArr.indexOf(id), 1)
}
handler.next(err)
},
//请求成功后进入
onResponse: (response, handler) => {
var id = response.config.method + response.config.url
if (ajaxArr.indexOf(id) !== -1) {
ajaxArr.splice(ajaxArr.indexOf(id), 1)
}
handler.next(response)
}
})
})
直接在全局中引入这个文件就可以了，我这个文件命名为preventRepeatSubmission.js。
我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>This is index Page</h1>
<ul>
<li><a href="/">/</a></li>
<li><a href="/index">index页面</a></li>
<li><a href="/404">404页面</a></li>
<li><a href="/info">info页面</a></li>
<li><a href="/nofound">nofound</a></li>
</ul>
<button id="sendMsg">请求拦截器</button>
<script src="./jquery.min.js"></script>
<!-- <script src="https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.min.js"></script> -->
<script src="./preventRepeatSubmission.js"></script>
<script>
document.getElementById("sendMsg").addEventListener("click", function() {
$.ajax({
url: 'http://localhost:3000/home',
type: 'GET',
success: function(data) {
console.log('success', data)
}
})
})
</script>
</body>
</html>
我的服务器使用koa2搭建的，代码如下：
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router
.get('/', (ctx, next) => {
ctx.body = '<h1>hello jspang</h1>';
})
.get('/home', async (ctx, next) => {
// ctx.body = '<h1>This is home Page</h1>'
async function delay(time) {
return new Promise(function(resolve, reject) {
setTimeout(function(){
resolve();
}, time);
});
};
await delay(5000);
const url = ctx.url;
// 在request中获取get请求参数
const request = ctx.request;
const request_query = request.query;
const request_querystring = request.querystring;
// 在ctx中获取get请求的参数
const ctx_query = ctx.query;
const ctx_querystring = ctx.querystring;
ctx.body = {url, request_query, request_querystring, ctx_query, ctx_querystring};
ctx.response.body = {status:200, msg:'已经成功获得参数'};
})
app
.use(router.routes()) // 向app中装载路由
.use(router.allowedMethods()) // 装载中间件
app.listen(3000, () => {
console.log('[Demo] is running at port 3000');
});
浏览器测试效果：
按下图中的button就会发起一次ajax请求，我的服务器是延迟响应5s的，在这延迟5s期间，我有点击了20次button，发起相同的20次ajax被成功拦截了，效果不错。
总结
到此这篇关于jquery项目中如何防重复提交的文章就介绍到这了,更多相关jquery防重复提交内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
jquery重复提交请求的原因浅析
一般来说有两个原因: 1.第一种是没有取消绑定,例如$("#test").unbind("click");$("#test").click(function(){....}); 2.是因为在不同的页面多次引用同一个js文件,这样也有可能会造成重复提交请求.
-
jquery提交form表单时禁止重复提交的方法
复制代码 代码如下: $(document).ready(function() { $('form').submit(function() { if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') { jQuery.data(this, "disabledOnSubmit", { submited: true }); $('input[type=submit], i
-
jQuery如何防止Ajax重复提交
首先说说防止重复点击提交是什么意思. 我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转.这样,可以一定程度上防止用户重复提交导致应用程序上逻辑错误. 不妨引深来看,它不一定发生在表单的提交事件上,同样可以发生在ajax的异步请求上.有效地在web客户端采用一定机制去防止重复点击提交,将大大减轻服务器端压力. 下面看下代码关于jquery ajax防止重复提交. ** * jquery ajax请求过滤,防止aja
-
jquery 防止表单重复提交代码
我的解决办法如下(只针对客户端): 用户点击提交按钮后给按钮添加disabled属性 复制代码 代码如下: $("input:submit").each(function() { var srcclick = $(this).attr("onclick"); if(typeof(srcclick)=="function"){ $(this).click(function() { if (srcclick()) { setdisabled(this
-
Jquery Validation插件防止重复提交表单的解决方法
由于在项目中应用了Jquery Validation表单验证插件,所以要实现在Validation验证完毕后,提交form,然后禁止按钮.CodeProject上有一个DisableBtnPostBack项目,但不无法和Jquery Validation结合,代码先贴出来,给大家提示下,碰到这种情况不要使用该代码.代码如下: js: 代码 复制代码 代码如下: function disableBtn(btnID, newText) { Page_IsValid = null; if (typeo
-
jQuery的 $.ajax防止重复提交的两种方法(推荐)
下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'
-
jquery项目中如何防重复提交详解
在新项目中,axios能实现防重复提交的功能,不过老项目(例如jQuery)的项目中,没有axios.但是导入Ajax-hook 就可以实现 Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook 导入 <script src="https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.min.js"></script> ah对象是在导入ajaxhook.min.js后就会出现
-
关于在IDEA中SpringBoot项目中activiti工作流的使用详解
记录一下工作流的在Springboot中的使用,,顺便写个demo,概念,什么东西的我就不解释了,如有问题欢迎各位大佬指导一下. 1.创建springboot项目后导入依赖 <dependency> <groupId>org.activiti</groupId> <artifactId>activiti-spring-boot-starter-basic</artifactId> <version>6.0.0</version&
-
Java 实战项目之疫情防控管理系统详解
目录 ☣基于java疫情防控管理系统 1.登录模块(注册) 2.今日疫情模块 3.防疫管理模块 4.系统管理模块 5.用户模块 ☣基于java疫情防控管理系统 ☣项目介绍:通过对依社区为单位进行人群的管理,以及疫苗的情况,包括小区状况,通过RBAC进行角色与用户之间的权限管理. ☣项目:环境-IDEA.Mysql数据库,Tomcat服务器,SpringMVC,SpringBoot,AOP,拦截器,过滤器,全局异常,RBAC权限控制等. 1.登录模块(注册) 核心代码:service层 @Serv
-
Springboot项目中使用redis的配置详解
程序结构: 一.配置 1. 在pom.xml中添加依赖 pom.xml文件如下: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=&q
-
Echart图表在项目中的前后端使用详解
目录 前言 一.项目架构 二.进入Echart官网学会自我分析 2.1 Echart官方文档 2.2 Echart基础代码常识 三,折线图使用 3.1 基础折线图 3.2 平滑折线图 3.3 面积折线图 3.4 炫酷组合图 前言 图表在我们的项目中可以帮我们很明确的看到我们想要看到的数据,并且通过操控图表,可以很快获得你想要的信息,在b站上同学们看见一些炫酷的可视化图表时否觉得好炫酷,好牛逼.一看这个项目就很nb,现在临近毕业设计阶段,学会如何使用Echart图表,或许会让你的项目打动老师,也会
-
Vue 项目中Echarts 5使用方法详解
目录 前言 创建项目 基本使用 安装 使用方法 柱状图 动态排序柱状图 前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目 先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用 安装 首先安装echarts npm i
-
如何在原有Android项目中快速集成React Native详解
前言 RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快速开发App ④ iOS&Android大部分代码通用 ⑤ code-push能做热更新,但是用不好依旧坑 ...... 在得到一些信息后,可以看出,要用RN高效率的做出比较不错的App是有可能的,单看投入度与最初设计是否合理,而且现在关于React Native的各种文档是相当丰富的,所以这个阶段想切入RN可能是一个不错的选择.
-
springMVC如何防止表单重复提交详解
目录 前言 防止表单重复提交 单机 实现的思路步骤 代码实现 分布式 实现的思路步骤 代码实现 总结 前言 在系统中,有些接口如果重复提交,可能会造成脏数据或者其他的严重的问题,所以我们一般会对与数据库有交互的接口进行重复处理 首先可以在前端做一层控制.当前端触发操作时,或弹出确认界面,或 disable 禁用按钮等等,但是这并不能彻底解决问题.假设我们不是从客户端提交,而是被其他的系统调用,还会遇到这种问题 为了彻底解决问题,还需要在后端对接口做防重处理 一般会引起表单重复提交的场景 在网
-
vue项目中引入vue-datepicker插件的详解
项目需求中有一个日期选择限制的功能点:今天之前不可选,周末不可选. 传统的input type='date无法做到,所以使用了这个插件来实现功能. 1.引入vue-datepicker loader:npm install vue-datepicker 2.引入moment loader:npm install moment --save 因为vue-datepicker是依赖vue和moment的,所以也应提前 引入moment: 3.在用到该插件的地方引入: import myDatepic
-
iOS 项目中的version和build 详解
iOS 项目中的version和build Version在plist文件中的key是"CFBundleShortVersionString",标识应用程序的发布版本号,和AppStore上的版本号保持一致.该版本的版本号是三个分隔的整数组成的字符串.第一个整数代表重大修改的版本,如实现新的功能或重大变化的修订.第二个整数表示的修订,实现较突出的特点.第三个整数代表维护版本 Build在plist文件中的key是"CFBundleVersion",标示(发布或者未发