1. 程式人生 > >ajax用beforeSend自定義請求過程中客戶端事件,提高用戶體驗

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

函數 fun 直接 alert 完成後 and success ram reat

本文為博主原創,未經允許不得轉載:

在應用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自定義請求過程中客戶端事件,提高用戶體驗