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 相关文章推荐
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
JavaScript Promise 用法
Jun 14 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
常用的js方法合集
Mar 10 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
vue 组件销毁并重置的实现
Jan 13 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中的MVC模式运用技巧
2007/05/03 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
PHP多进程编程实例详解
2017/07/19 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
python顺序执行多个py文件的方法
2019/06/29 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
地理教师岗位职责
2014/03/16 职场文书
大型营销活动计划书
2014/04/28 职场文书
土地租赁意向书
2014/07/30 职场文书
村安全生产责任书
2014/08/25 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
孔繁森观后感
2015/06/10 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android