ajax异步请求防止重复提交的方法

  JS通过ajax发起异步请求时，经常会出现一个按钮快速多次点击时，请求进行了多次提交，可能导致很多不必要的问题出现，比如写入某些脏数据等。

  此处针对ajax发起请求多次提交的问题进行JS代码处理的简单方法有如下两种：

1、定义lock（锁）机制：

//提交

var lock = true;//防止重复提交定义锁

$('.saveRemark').click(function(){

var noticeType = $('select[name="noticeType"]').val();

var noticeTitle = $('input[name="noticeTitle"]').val();

if(noticeType == ''){

$('.change').find('p').html('请选择公告类型！');

$('.change').show();

return;

}

if(noticeTitle == ''){

$('.change').find('p').html('请输入公告标题！');

$('.change').show();

return;

}

var noticeStatus = $(this).attr('noticeStatus');

$('input[name="noticeStatus"]').val(noticeStatus);

var form = $('#userQueryForm');

if(!lock){// 2.判断该锁是否打开，如果是关闭的，则直接返回

return false;

}

lock = false ; //3.进来后，立马把锁锁住

$.ajax({

type: 'post',

url: '/manage/noticeInsertDO.htm?date='+new Date(),

data : form.serialize(),

success: function(res) {

if(res.code == 1){

$('.actionResult').find('p').html(res.msg);

$('.actionResult').show();

}else{

$('.change').find('p').html(res.msg);

$('.change').show();

lock = true;//如果业务执行失败，修改锁状态

}

}

});

return false;

});

2、

定义使用ajax的 beforeSend: function () {

//此处可选择方式，如移除属性等。

},

如下例子：

//提交

$('.saveRemark').click(function(){

var noticeType = $('select[name="noticeType"]').val();

var noticeTitle = $('input[name="noticeTitle"]').val();

if(noticeType == ''){

$('.change').find('p').html('请选择公告类型！');

$('.change').show();

return;

}

if(noticeTitle == ''){

$('.change').find('p').html('请输入公告标题！');

$('.change').show();

return;

}

var noticeStatus = $(this).attr('noticeStatus');

$('input[name="noticeStatus"]').val(noticeStatus);

var form = $('#userQueryForm');

$.ajax({

type: 'post',

url: '/manage/noticeInsertDO.htm?date='+new Date(),

data : form.serialize(),

beforeSend: function () {

// 移除属性，避免选择器再选择，防止重复提交。

$(".saveRemark").removeAttr("class");

},

success: function(res) {

if(res.code == 1){

$('.actionResult').find('p').html(res.msg);

$('.actionResult').show();

}else{

$('.change').find('p').html(res.msg);

$('.change').show();

}

}

});

return false;

});

当然，这些处理方式只能针对简单的无风险的业务进行处理，有道是任何只在前端的限制都是耍流氓，如果涉及安全及有风险存在时，我们还是需要在后台进行相应的处理，即可以用拦截器来实现拦截，具体实现请待以后更新。

以上内容如有不当之处，欢迎指正。