Struts2 利用AJAX 導出大數據設置遮罩層

Struts2 利用AJAX 導出大數據設置遮罩層

 

 

需求背景：

每次咱們導出excel的時候 ，若是數據量很大，導出花費的時間會很長，頁面卻有沒人任何反應，這個時候用戶會認爲系統有問題，要麼關了頁面，要麼狂點導出。感知太差了~甚至用戶誤操做會致使服務器崩潰。
因此我麼咱們須要經過進度條方式告知客戶導出的進度。
經過在導出過程當中循環請求後臺確認時候導出完畢來控制遮罩層在某個時候關閉。

 

 

解決辦法：

以前反覆用了N種方式都沒有解決相似問題，

一、iframe 方式 最終拜拜

二、ajax 方式  ajax 沒法彈出download下載流框 拜拜 

 

 

 

重點來了

思路！
一、JS 設置定時器 以1s 的訪問去請求Action 

二、Action 設置一個檢測session 是否有效的方法 

三、導出動做

 

// show遮罩層
                parent.Q.mask('數據正在導出中... ');
                // 檢測後臺session 是否有效 
                var isExportUrl = parent.Q.URL +'/cr/isExport.action?_='+new Date().getTime();
                location.href = parent.Q.URL +'/cr/exportCopyrightEnd.action?form.queryInfo.copyrightStatus=0&_='+new Date().getTime();
            }

 

二、isExportAction()

　　

 public void isExport()
    {
　　　　  // 獲取session 判斷導出是否結束
        String exportFlag = (String)ActionUtil.getSession().getAttribute("exportFlag");
        if (StringUtils.isEmpty(exportFlag))
        {
            try
            {
                ActionUtil.str2response("success");
            }
            catch (IOException e)
            {
                DEBUGGER.error("Failed to isExport", e);
                e.printStackTrace();
            }
        }
    }

 

三、

        // 在導出結束 刪除session    
 　　　　ActionUtil.getSession().removeAttribute("exportFlag");

 

四、頁面JS 只須要設置timer 請求後臺isExport() 便可

　　經過setInterval 方法循環請求後臺獲取exportedFlag， 一旦後臺返回success（導出完畢），則關閉遮罩層

　　

 // 設置一個定時器 
                var timer = setInterval(function(){
                    $.ajax({
                        url: isExportUrl,
                        type:'post',
                        success: function(data){
                            if(data ==='success'){
                                clearInterval(timer);
                                // 關閉遮罩層
                                parent.Q.unmask();
                            }
                        },
                        error:function(e){
                            console.log(e.responseText);
                        }
                    }); 
                  }, 1000); //1s