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 相关文章推荐
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
基于python编写的微博应用
2014/10/17 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python读写文件基础知识点
2019/06/10 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python config文件的读写操作示例
2019/09/27 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python 动态绘制爱心的示例
2020/09/27 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
P/Invoke是什么
2015/07/31 面试题
爸爸的花儿落了教学反思
2014/02/20 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
python获取带有返回值的多线程
2022/05/02 Python