本文为博主原创，未经允许不得转载：
在应用ajax的过程中，当我们再前台提交请求的时候，如果服务端响应事件比较长，就会导致需要等很长时间在前台才能接受到服务端返回的
响应结果，往往会导致用户重复点击按钮，进行重复请求，如何可以避免这种情况发生，ajax提供了一个beforeSend属性，用这个既可以避免这种
情况发生。
用这个属性可以定义客户端向服务端请求过程中的事件，比如在请求过程中禁用请求按钮的属性，或定义请求加载状态等，
实现的代码如下：
function exportData(){
$.ajax({
type: "post",
cache: false,
async: true,
data: {
"name":$("#cameraName").val(),
"createTime":$("#createTime").val(),
"lastTime":$("#lastTime").val()
},
beforeSend: function () {
//此处定义并调用jquery-confirm的加载层事件
obj = jqconfirmTip('正在响应请求,请稍候...','fa fa-spinner fa-spin');
return true;
},
dataType: 'json',
url: "exportDetail?rnd=" + Math.random(),
success: function (a) {
if (a.resultCode == "SUCCESS") {
obj.close(); //关闭加载层
} else {
alert("导出失败");
obj.close();
}
},
error: function (msg) {
alert("请求失败");
obj.close();
}
});
}
//jquery-confirm插件，需要引入jquery-confirm.js （该方法可以直接调用）
function jqconfirmTip(title, icon) {
var obj = $.confirm({
backgroundDismiss : false,
content : false,
icon : icon,
title : title,
// autoClose : 'confirm|10000',
animation : 'scaleY',
closeIcon : false,
columnClass : 'col-md-4 col-md-offset-4',// col-md-6 col-md-offset-3
confirmButton : false,
cancelButton : false,
theme : 'black'
});
return obj;
}
效果如图：
上述例子中的应用根据服务端返回的结果类型，去关闭该加载层。
同时ajax也提供了请求完成后回调函数 (请求成功或失败之后均调用)的属性，该属性为：complete，可在此处定义回调事件，关闭或停止beforeSend处定义的事件
示例如下：
$.ajax({
type: "post",
contentType: "application/json",
url: "/userList",
beforeSend: function () {
$("loading").show();
},
success: function (data) {
if (data == "Success") {
// ...
}
},
complete: function () {
$("loading").hide();
},
error: function (data) {
$("loading").hide();
}
});
。