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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
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之第四天
2006/10/09 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP图片加水印实现方法
2016/05/06 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python如何实现代码检查
2019/06/28 Python
Python生成词云的实现代码
2020/01/14 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
消防应急演练方案
2014/02/12 职场文书
交通安全责任书范本
2014/07/24 职场文书
三问三解心得体会
2014/09/05 职场文书
毕业酒会致辞
2015/07/29 职场文书