jQuery的 $.ajax防止重复提交的两种方法(推荐)


Posted in Javascript onOctober 14, 2016

下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示:

1、第一种,对于onclick事件触发的的ajax

可以采用如下方法:

即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用

$.ajax(
{
type: 'POST',
url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src,
cache:false,
dataType: 'json',
data: {'src':src,"uid": uid,'shipping_id':shipping_id,'order_amount':order_amount,'amount':amount,'postscript':postscript,'addr_id':addr_id},
async: false,
beforeSend:function()
{ //触发ajax请求开始时执行
$('#submit_font').text('提交订单中...');
$('.pay_alipay').attr('onclick','javascript:void();');//改变提交按钮上的文字并将按钮设置为不可点击
}, 
success: function (msg, textStatus) 
{
if(msg.result==1)
{
$.Alert('成功提交订单', 160);
window.location.href=APP+'?m=Pay&a=index&sid='+ sid + '&fuid='+ fuid + '&parent_order_sn='+msg.parent_order_sn;
}
else
{
$.Alert(msg.msg, 160);
$('#submit_font').text('提交订单');
$('.pay_alipay').attr('onclick','submitorder();');//改变提交按钮上的文字并将按钮设置为可点击 
}
},
error: function (textStatus) 
{
$.Alert('网络繁忙,请稍后再试...', 160);
$('#submit_font').text('提交订单');
$('.pay_alipay').attr('onclick','submitorder();');//改变提交按钮上的文字并将按钮设置为可点击 
},
complete: function(msg, textStatus)
{ 
//ajax请求完成时执行
if(msg.result==1)
{
$('#submit_font').text('提交订单');
$('.pay_alipay').attr('onclick','javascript:void();');//改变提交按钮上的文字并将按钮设置为可以点击
}
} 
});

2、利用jquery ajaxPrefilter中断请求

1)Prefilters是一个预过滤器,在每个请求之前被发送和$.ajax()处理它们前处理。

options 是请求的选项

originalOptions 值作为提供给Ajax方法未经修改的选项,因此,没有ajaxSettings设置中的默认值

jqXHR 是请求的jqXHR对象

以上内容的核心思想是维护一个队列,发送请求时,将请求加入队列,请求响应后,从队列中清除,这就保证了在任一时刻只能有一个同样的请求发送.

局限性:仅仅是前台防止jQuery的ajax请求。对于非jquery的ajax请求,不起作用。因为使用的是jquery的ajaxPreFilter函数,仅仅对jquery的ajax请求有作用。

2)按钮每次点击都会向后端发送请求,下面的demo实现了多次点击按钮之后,只保证最后一次点击的请求能够成功。

<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button> 
<script type="text/javascript" src="jquery.min.js"></script>
<script>
var pendingRequests = {};
jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
var key = options.url;
console.log(key);
if (!pendingRequests[key]) {
pendingRequests[key] = jqXHR;
}else{
//jqXHR.abort(); //放弃后触发的提交
pendingRequests[key].abort(); // 放弃先触发的提交
}
var complete = options.complete;
options.complete = function(jqXHR, textStatus) {
pendingRequests[key] = null;
if (jQuery.isFunction(complete)) {
complete.apply(this, arguments);
}
};
});
<!-- 异步加载应用列表开始 -->
$("#button1").live("click", function() {
$.ajax('config/ajax/appinfoListFetcher.json', {
type:'POST',
data: {param1:1,
param2:2,
},
success: function(res){
//后端数据回写到页面中
},
error:function(jqXHR, textStatus, errorThrown){
if(errorThrown != 'abort'){
alert('应用加载失败!');
}
}
});
<!-- 异步加载应用列表结束 -->
});
</script>

调用abort后jquery会执行error的方法,抛出abort的异常信息。可以使用以下方式区分出该类型的异常。

3)注意事项:对于嵌套的点击事件的代码,是不起作用的。

$('.btn-cancel-all').live('click',function()
{
$('.confirm-dialog .confirm').live('click',function()
{
$.ajax({
//这里面的ajax事件是不能起作用的
})
}
}

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

Javascript 相关文章推荐
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
Vue render深入开发讲解
Apr 13 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
jQuery如何防止Ajax重复提交
Oct 14 #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
You might like
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
python二分查找算法的递归实现方法
2016/05/12 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python连接phoenix的方法示例
2017/09/29 Python
python tornado微信开发入门代码
2018/08/24 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
安全标准化汇报材料
2014/02/03 职场文书
四年级语文教学反思
2014/02/05 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
认识深刻的检讨书
2014/02/16 职场文书
意向书范文
2014/03/31 职场文书
快递员岗位职责
2014/09/12 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
工作收入证明模板
2014/10/10 职场文书
永不妥协观后感
2015/06/10 职场文书
企业安全生产检查制度
2015/08/06 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server