本文為博主原創，未經允許不得轉載：

在應用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();
    }
});

。

ajax用beforeSend自定義請求過程中客戶端事件，提高用戶體驗