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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
js实现tab切换效果实例
Sep 16 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
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
域名查询代码公布
2006/10/09 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
php析构函数的简单使用说明
2015/08/24 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PDO::_construct讲解
2019/01/27 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python多进程机制实例详解
2015/07/02 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
学术会议邀请函范文
2014/01/22 职场文书
质量月活动策划方案
2014/03/10 职场文书
质量标语大全
2014/06/12 职场文书
百日安全生产活动总结
2014/07/05 职场文书
青春雷锋观后感
2015/06/10 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
请假条应该怎么写?
2019/06/24 职场文书
导游词之潮音寺
2019/09/26 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
聊一聊python常用的编程模块
2021/05/14 Python
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android