jQuery的 $.ajax防止重复提交的两种方法(推荐)
转载 &更新时间：日 17:03:51 & 作者：Everything1209
本文给大家分享两种jquery 的ajax防止重复提交的方法，第一种方法对于onclick事件触发的ajax，在beforeSend中使点击按钮不可用，ajax结果返回后置为可用，第二种利用jquery ajaxPrefilter中断请求，对于详情请参考下本文
下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法，具体介绍如下所示：
1、第一种，对于onclick事件触发的的ajax
可以采用如下方法：
即在beforeSend中使点击按钮不可用，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_
$.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&
var pendingRequests = {};
jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
var key = options.
console.log(key);
if (!pendingRequests[key]) {
pendingRequests[key] = jqXHR;
//jqXHR.abort(); //放弃后触发的提交
pendingRequests[key].abort(); // 放弃先触发的提交
var complete = options.
options.complete = function(jqXHR, textStatus) {
pendingRequests[key] =
if (jQuery.isFunction(complete)) {
complete.apply(this, arguments);
&!-- 异步加载应用列表开始 --&
$("#button1").live("click", function() {
$.ajax('config/ajax/appinfoListFetcher.json', {
type:'POST',
data: {param1:1,
success: function(res){
//后端数据回写到页面中
error:function(jqXHR, textStatus, errorThrown){
if(errorThrown != 'abort'){
alert('应用加载失败！');
&!-- 异步加载应用列表结束 --&
调用abort后jquery会执行error的方法，抛出abort的异常信息。可以使用以下方式区分出该类型的异常。
3）注意事项：对于嵌套的点击事件的代码，是不起作用的。
$('.btn-cancel-all').live('click',function()
$('.confirm-dialog .confirm').live('click',function()
//这里面的ajax事件是不能起作用的
以上所述是小编给大家介绍的jQuery的 $.ajax防止重复提交的两种方法(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JS WEB前端开发如何防止重复提交的实现方法例子 - 维维软件园
热门推荐：
您的位置：
→ JS WEB前端开发如何防止重复提交的实现方法例子
JS WEB前端开发如何防止重复提交的实现方法例子
作者：维维 日期： 14:48:22 人气:
JS WEB前端开发如何防止重复提交的实现方法例子分享，今天给大家带来的是JS WEB 前端开发中防止重复提交的实现方法，涉及到表单提交的几种方式介绍，很具有参考借鉴价值，有兴趣的朋友来详细了解一下吧。
web前端数据请求或表单提交往往通过对dom的点击事件来操作，不过往往因为认为点击过快（少年手速挺快的嘛），或是因为响应等待使得用户误认为没有操作而重复许多次点击，造成表单数据的连续重复提交，造成用户体检的不好，甚至还会影响到整个系统的安全性。而前端的防止重复提交至少很有效的防止了人为正常操作下的一些不必要麻烦。下面来讲讲怎么样有效避免前端的表单重复提交。
表单提交有如下几种方式：
&form name=&form& method=&post& action=&#&&
&input type=&submit& name=&submit& value=&提交&&
此外，还有一种常用的方法就是使用图片：
&form name=&form& method=&post& action=&# &&
&input type=&image& name=&submit& src=&btnSubmit.jpg&&
第三种是使用链接来提交表单，用到了javascript的DOM模型：
&form name=&form& method=&post& action=&#&&
&a href=&javascript:form.submit();&&提交&/a&
事实上这一种是通过js 进行提交。可以理解成：
$(&form&).find(&a&).click(function(){
$(&form&).submit();
第一种和第二种可以用js来：
$(&input[type='submit']&).click(function(){
　　　　$(&form&).submit();
$(&input[name='submit']&).click(function(){
　　　　$(&form&).submit();
总而言之，都是对form进行提交，当然还有出了表单提交还有些请求也要防止重复，例如响应某个事件的ajax请求（提交数据）
type: &post&,
data: data,
success: function (data) {
那么前面这些提交和请求在网络和性能因素上导致不能及时网络响应而且在事件多次响应时造成的重复，除非在提交响应完成前的点击（触发事件）视为无效，等当前响应完了再去响应下一个请求
假如是表单按钮我们可以这样在点击以后将按钮disabled掉
$(&input[type='submit']&).click(function(){
$(this).attr(&disabled&,　true);
　$(&form&).submit();
正常来讲，将点击后将按钮disabled设为true时按钮就不能点击了那么第二次之后点击就无效了，不过这样做你会发现同时第一次点击的表单也无法正常提交了（好像是h5的标准后才不行的，不管怎样h5标准的浏览器试了试都不行），看来是disabled影响了表单的提交，那么先提交后disabled看看行不行：
$(&input[type='submit']&).click(function(){
　$(&form&).submit();
$(this).attr(&disabled&,　true);
实验结果 ，这样也是不行的，我们不能猜想submit（）回调在click函数最后执行并且.submit()函数内部应该对disabel做了判断（假如这是浏览器内部机制原理），反正在当前这个交互周期里disabled了就不能submit
那么我们能够抛开disabled用代码逻辑来防止重复：
$(&input[type='submit']&).click(function(){
if(!$(this)[0].repeat){
$(this)[0].repeat=
$（&form&).submit();
在当前点击的按钮假如没有repeat的话就进入提交且设置个值为true的repeat属性，当第二次进来时发现有这一个属性就不提交，看似这样的逻辑会防止重复提交了，不过事实都是残酷的。
是的，当点击过快时还是会重复提交，这是因为，假如click中没执行submit时html默认的type＝submit 的input点击操作会提交表单，举个完整的例子：
&form name=&form& method=&post& action=&#&&
&input type=&submit& name=&submit& value=&提交&&
&form name=&form& method=&post& action=&#&&
&input type=&submit& name=&submit& value=&提交&&
$(&input[type='submit']&).click(function(){
console.log(&here is click too!&);
&form name=&form& method=&post& action=&#&&
&div&提交&/div&
$(&form&).find(&div&).click(function(){
　　$(&form&).submit();
这3个代码都是一个效果提交表单，不过我们发现阻止表单提交的不就是在当前交互周期（一次点击－》响应－》回调）里，将submit按钮disabled掉吗，好的，少年上代码
$(&form&).find(&div&).click(function(){
if(!$(this)[0].repeat){
　　 $(this)[0].repeat=
　　$(this).closest(&form&).submit();
　　 $(this).attr(&disabled&,　true); }
大家看到没有，第二次点击时就disabeld掉了，因此只有第一次成功，第二次的就不会提交了。
当然，假如是其他dom元素防止重复点击那就更加的简单了：
$(&div&).click(function(){
　　if(!!$(this)[0].isRepeat){
$(this)[0].isRepeat=1;
　　 　$.ajax({
type: &post&,
data: data,
success: function (data) {
　　　　　　　　$(this)[0].isRepeat＝0；
　　　　　　　　
　　　　　　}
由于submit（）会刷新试图，而ajax不会，因此在回调以后需要将判断重复的那个属性赋值为false，这是不是就更加简单呢。
上一篇：下一篇：
大家还看了：
本类热门阅览前端重复请求的问题
理解http 的幂等性
&基于http协议的web
api分布式服务提供方式，属于面向资源的网络应用层协议，在服务端和客户端实现都非常简单。加上浏览器、html5、Ajax等的web端极大发展，简单的http协议越发需要注重web
api的质量。其中需要注意的就有一项幂等性。
http的幂等性指的是一次和多次请求某一个资源应该具有的同样的副作用。举例说明：假设有一个账户取款，用接口调用bool
withdraw（account_id,
amount);如果扣除成功，返回true，失败返回false；出现的问题是，倘若因为网络原因，调用成功的取款没有正常返回true，那么客户端就无法获知处理结果，倘若在网页中再次刷新，则有可能出现重复扣款的现象。
解决方法目前有两种，一种是采用分布式事务，引入分布式事务的中间件保证withdraw功能的事务性。详情略去。第二种方法采用幂等性。
int create_ticket()
bool idempotent_withdraw(ticket_id, account_id, amount)
create_ticket的语义是获取一个服务器端生成的唯一的处理号ticket_id，它将用于标识后续的操作。
idempotent_withdraw和withdraw的区别在于关联了一个ticket_id，一个ticket_id表示的操作至多只会被处理一
次，每次调用都将返回第一次调用时的处理结果。这样，idempotent_withdraw就符合幂等性了，客户端就可以放心地多次调用。
常见的post、put操作非幂等，而get则是幂等的。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。生活因为优雅代码而改变
如何防止按钮重复提交的一个实践
有时候，我们某个按钮处理的工作量很大，耗时很久，可能引发用户的误解，以为程序未响应，结果再次提交，可能导致处理逻辑执行到一半，又再次执行。
那我们有什么办法可以做到不让用户重复点击，又能给予友好的操作等待提示呢？下面是一个小小实践。
前台代码：
&%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&
&html xmlns="" &
&head runat="server"&
&title&如何防止按钮重复提交的一个实践&/title&
&script type="text/javascript"&
var IsClickSumbit =//全局变量
function CheckIsClickSumbit(BtnSumbit)
if(IsClickSumbit)//拦截重复点击(页面在刷新前，全局变量的值是一个静态变量)
document.getElementById(BtnSumbit).disabled=//提交按钮变灰
document.getElementById("divImg").style.display ="block";
document.getElementById("ImgLoadingAnimation").src="LoadingAnimation.gif"
document.getElementById("BtnHideSumbit").click();//执行委托： protected void BtnSumbit_Click(object sender, EventArgs e)
&form id="form1" runat="server"&
&asp:button ID="BtnSumbit" runat="server" Text="提
OnClientClick="javascript:CheckIsClickSumbit('BtnSumbit')" style="cursor:hand" OnClick="BtnSumbit_Click" /&
&div id="divImg" style="display :none"&
&img id="ImgLoadingAnimation" src="" alt="正在处理中..." /&
&asp:LinkButton ID="BtnHideSumbit" runat="server"
OnClick="BtnSumbit_Click" Text="" /&&!--注意：Text为空！故在界面上是不可见的，但是又保证了BtnHideSumbit是确实存在的一个被委托的元素--&
后台代码：
protected void BtnSumbit_Click(object sender, EventArgs e)
System.Threading.Thread.Sleep(5000);
//进度条运行5秒后然后消失，而且按钮恢复原状。
没有更多推荐了，如何用jquery来阻止页面重复提交？急急急_百度知道
如何用jquery来阻止页面重复提交？急急急
&div class=&col-xs-12 col-sm-9&&
&div class=&clearfix&&
&button type=&submit& id=&addmanager& class=&btn btn-primary&&保存&/button&
我有更好的答案
type最好不用submit，直接用button ,使用 onclick事件，点击后就把button禁用
用Button也能提交？这样不行吗？求代码
onclick话，要写个js方法，不能提交到后台了你也可以看下这里面的方法，第一种应该比较适合你
采纳率：18%
用一个变量，记录一下上次点击的时间，点击的时候判断当前时间和上次点击时间的差值。或者
onclick=&this.disabled=this.value='正在保存当中....';这里写你的提交事件& 点击以后把按钮变灰，等你的提交操作完成以后 ，再启用这个按钮，然后修改按钮的text。
为您推荐：
其他类似问题
贷款的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。