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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
AngularJS中的模块详解
Jan 29 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
three.js 入门案例详解
Jan 23 Javascript
JS处理一些简单计算题
Feb 24 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
php链式操作的实现方式分析
2019/08/12 PHP
JavaScript使用cookie
2007/02/02 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python实现聚类算法原理
2018/02/12 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
Servlet如何得到服务器的信息
2015/12/22 面试题
应届生护士求职信
2013/11/01 职场文书
就业自荐信
2013/12/04 职场文书
优良学风班申请材料
2014/02/13 职场文书
公证委托书模板
2014/04/03 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
推广普通话主题班会
2015/08/17 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android