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与JSon实现的无刷新分页代码
Sep 13 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
javascript实现密码验证
Nov 10 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
js实现无缝滚动特效
Dec 20 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 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中几种常见安全设置详解
2010/04/06 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
Yii使用技巧大汇总
2015/12/29 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
使javascript也能包含文件
2006/10/26 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
python中global与nonlocal比较
2014/11/21 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python实现端口检测的方法
2018/07/24 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
幼儿园五一活动方案
2014/02/07 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
小学生环保演讲稿
2014/04/25 职场文书
根叔历年演讲稿
2014/05/20 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
给下属加薪申请报告
2015/05/15 职场文书
篮球拉拉队口号
2015/12/25 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书