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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
php与js的区别是什么
Aug 05 Javascript
JS数组的常见用法实例
Feb 10 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
简单的JS轮播图代码
Jul 18 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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中die(),exit(),return的区别
2013/06/20 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
php include类文件超时问题处理
2015/02/06 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
python反扒机制的5种解决方法
2021/02/06 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
《假如》教学反思
2014/04/17 职场文书
会计专业自荐信
2014/06/03 职场文书
西柏坡观后感
2015/06/08 职场文书
追悼会答谢词范文
2015/09/29 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
MySQL派生表联表查询实战过程
2022/03/20 MySQL
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL