点击触发ajax重复提交表单,屡次连续点击致使Ajax重复提交

有个相似商品管理的功能，商品经过execle 文件导入商品，而后“检查”导入的数据的合法性功能。html

因为导入的商品的数量通常较大，因此点击一次“检查”按钮，每次的执行时间相对较长，用户每每会进行屡次点击“检查“”按钮，形成程序开销较大，甚至程序卡死，或者由于ajax 提交的回调函数等待执行时间过长，致使页面假死或崩溃。因此必需要给相似这样的按钮加上“控制”------在ajax 执行时，使按钮失效(不能点击)，待后太代码执行完毕后，再回调函数中处理一下这个button，使之能够继续点击。ajax

这样的功能貌似很好实现，可是期间遇到个小问题，本身困惑了个把小时，因此拿出本身的经历，以便其余遇到此类问题的小伙伴们节约更多时间，下面贴关键代码：json

检查

异步

代码片断A:async

$("#check").click(function(){

$("#check").addClass('disabled').attr('disabled', true); //---------------------------17行

$.ajax({

url:"${base}/impstkmas/check.jhtml",

type : 'post',

dataType:'json',

async:false,

success: function(data){

$("#check").removeClass('disabled').attr('disabled', false);//-----------------------------24行

if(data.success){

$("#grid-table").jqGrid('setGridParam',{

postData:{} //发送数据

}).trigger("reloadGrid"); //从新载入

$.jBox.tip('检查完成！', 'success');

}else{

$.jBox.tip(data.msg, 'error');

}

}

});

});

函数

代码片断B:post

$("#check").click(function(){

$(this).addClass('disabled').attr('disabled', true);//--------------------------------17 行

$.ajax({

url:"${base}/impstkmas/check.jhtml",

type : 'post',

dataType:'json',

async:false,

success: function(data){

$(this).removeClass('disabled').attr('disabled', false);//--------------------------------24 行

if(data.success){

$("#grid-table").jqGrid('setGridParam',{

postData:{} //发送数据

}).trigger("reloadGrid"); //从新载入

$.jBox.tip('检查完成！', 'success');

}else{

$.jBox.tip(data.msg, 'error');

}

}

});

});

this

你们比较上面两段代码，能够看出区别：url

A段代码是正确的执行，B段代码是不能正确执行的。开始特别疑惑：spa

$(this).addClass('disabled').attr('disabled', true);  和  $(this).removeClass('disabled').attr('disabled', false);  一个是使button失效，一个是使button 生效，为何只能失效，不能回复生效。

缘由相信你们已经看出来了，这里是用在ajax 里的，我急居然忽略了ajax 的最大特色：“异步”！！！。 没错，就是这个特色致使，17 行的代码执行完了，是能够的，由于$(this) 元素是被认识的。而 24 行的代码，死活就是执行不了，由于他用在了回调函数里了，此时再用$(this)，代码已经不认识$(this)指的是哪一个元素了，因此执行不了。

总结一句话就是，17 行的 $(this) 和 24 行的 $(this) 是不同的，因此，你们仍是尽可能不偷懒，用元素选择器在选择出来的对象是可定不会错的！