jQuery如何防止Ajax重复提交


Posted in Javascript onOctober 14, 2016

首先说说防止重复点击提交是什么意思。

我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转。这样,可以一定程度上防止用户重复提交导致应用程序上逻辑错误。

不妨引深来看,它不一定发生在表单的提交事件上,同样可以发生在ajax的异步请求上。有效地在web客户端采用一定机制去防止重复点击提交,将大大减轻服务器端压力。

下面看下代码关于jquery ajax防止重复提交。

**
* jquery ajax请求过滤,防止ajax请求重复发送,对ajax发送错误时进行统一处理
*/
$(function(){
var pendingRequests = {};
// 所有ajax请求的通用前置filter
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
var key = generatePendingRequestKey(options);
//请求是否已经存在
if(!pendingRequests[key]){
storePendingRequest(key,jqXHR);
}else{
//如果ajax请求已经存在,下一次相同的请求则取消,防止重复请求
jqXHR.abort();
}
//ajax请求完成时,从临时对象中清除请求对应的数据
var complete = options.complete;
options.complete = function(jqXHR, textStatus) {
//延时1000毫秒删除请求信息,表示同Key值请求不能在此时间段内重复提交
setTimeout(function(){
delete pendingRequests[jqXHR.pendingRequestKey];
},1000);
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
//统一的错误处理
var error = options.error;
options.error = function(jqXHR, textStatus) {
errorHandler(jqXHR, textStatus);
if ($.isFunction(error)) {
error.apply(this, arguments);
}
};
});
/**
* 当ajax请求发生错误时,统一进行拦截处理的方法
*/
function errorHandler(jqXHR, textStatus){
switch (jqXHR.status){
case(500):
internalError(jqXHR);
break;
case(403):
accessDenied(jqXHR);
break;
case(408):
timeoutError(jqXHR);
break;
case(404):
pageNotFound(jqXHR);
break;
default:
//otherError(jqXHR, textStatus);
}
}
function pageNotFound(jqXHR){
Component.warningMessageBox({
content:"请求访问的地址或内容不存在!"
});
}
function accessDenied(jqXHR){
Component.warningMessageBox({
content:"你无权进行此操作或页面访问!"
});
}
function internalError(jqXHR){
Component.warningMessageBox({
content:"服务器存在错误,未能正确处理你的请求!"
});
}
function timeoutError(jqXHR){
window.location.href=contextPath + "/j_spring_security_logout";
}
function otherError(jqXHR, textStatus){
Component.warningMessageBox({
content:"未知错误,错误代码:" + textStatus
});
}
/**
* 将ajax请求存储到临时对象中,用于根据key判断请求是否已经存在
*/
function storePendingRequest(key, jqXHR){
pendingRequests[key] = jqXHR;
jqXHR.pendingRequestKey = key;
}
/**
* 根据ajax请求参数构建一个临时存储key,此处简单的使用url作为key,
* 不考虑为解决请求类型为get时相同路径引起的缓存问题,采用随机码构建URL的情况
*/
function generatePendingRequestKey(options){
return options.url;
}
});

以上所述是小编给大家介绍的jquery防止Ajax重复提交的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 #Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 #Javascript
js插件Jcrop自定义截取图片功能
Oct 14 #Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 #Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 #Javascript
JS动态计算移动端rem的解决方案
Oct 14 #Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 #Javascript
You might like
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
28个JS验证函数收集
2010/03/02 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
django中的数据库迁移的实现
2020/03/16 Python
Python实现SMTP邮件发送
2020/06/16 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
大课间体育活动方案
2014/03/12 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
故宫英文导游词
2015/01/31 职场文书
个人党性分析总结
2015/03/05 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android