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的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
微信小程序实现滑动删除效果
May 19 Javascript
js简易版购物车功能
Jun 17 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
JavaScript闭包详解
2015/02/02 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python分析作业提交情况
2017/11/22 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
pandas值替换方法
2018/07/10 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
500行python代码实现飞机大战
2020/04/24 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
用 python 进行微信好友信息分析
2020/11/28 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
企划主管岗位职责
2013/12/12 职场文书
入职担保书范文
2014/05/21 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
Python if else条件语句形式详解
2022/03/24 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js