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 相关文章推荐
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 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教程 预定义变量
2009/10/23 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Anaconda入门使用总结
2018/04/05 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
Python基于locals返回作用域字典
2020/10/17 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
检讨书怎么写
2015/01/23 职场文书
开工典礼致辞
2015/07/29 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
趣味运动会广播稿
2015/08/19 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle