Struts2 利用AJAX 导出大数据设置遮罩层

需求背景:

每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面,要么狂点导出。感知太差了~甚至用户误操作会导致服务器崩溃。
所以我么我们需要通过进度条方式告知客户导出的进度。
通过在导出过程中循环请求后台确认时候导出完毕来控制遮罩层在某个时候关闭。

解决办法:

之前反复用了N种方式都没有解决类似问题,

1、iframe 方式 最终拜拜

2、ajax 方式  ajax 无法弹出download下载流框 拜拜

重点来了

思路!
1、JS 设置定时器 以1s 的访问去请求Action

2、Action 设置一个检测session 是否有效的方法

3、导出动作

// 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();
}

2、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();
}
}
}

3、

        // 在导出结束 删除session    
    ActionUtil.getSession().removeAttribute("exportFlag");

4、页面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

  

  

Struts2 利用AJAX 导出大数据设置遮罩层的更多相关文章

  1. Winform .NET 利用NPOI导出大数据量的Excel

    前言:公司让做一个导出数据到Excel的小工具,要求是用户前端输入sql语句,点击导出按钮之后,将数据导出到Excel,界面如图所示:文件下端显示导出的进度 遇到的问题: 1.使用NPOI进行Exce ...

  2. Struts2.5 利用Ajax将json数据传值到JSP

    AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...

  3. ASP.NET MVC + EF 利用存储过程读取大数据,1亿数据测试很OK

    看到本文的标题,相信你会忍不住进来看看! 没错,本文要讲的就是这个重量级的东西,这个不仅仅支持单表查询,更能支持连接查询, 加入一个表10W数据,另一个表也是10万数据,当你用linq建立一个连接查询 ...

  4. C#通过OLEDB导出大数据到Excel

    C#导出数据到Excel,基本有两种方法,一种方法是通过Microsoft.Office.Interop.Excel.Application,一行一列的写入Excel中:另一种方法是通过OLEDB,利 ...

  5. ASP.NET MVC + EF 利用存储过程读取大数据

    ASP.NET MVC + EF 利用存储过程读取大数据,1亿数据测试很OK 看到本文的标题,相信你会忍不住进来看看! 没错,本文要讲的就是这个重量级的东西,这个不仅仅支持单表查询,更能支持连接查询, ...

  6. POI3.8解决导出大数据量excel文件时内存溢出的问题

    POI3.8的SXSSF包是XSSF的一个扩展版本,支持流处理,在生成大数据量的电子表格且堆空间有限时使用.SXSSF通过限制内存中可访问的记录行数来实现其低内存利用,当达到限定值时,新一行数据的加入 ...

  7. phpmyadmin导入导出大数据文件的办法

    在phpmyadmin的使用中,经常需要进行导入导出数据库的操作. 但是在导入导出大型数据库文件的时候经常会只是部分导出或者部分导入. 或者是导入导出不成功. 原因就是服务器和php.mysql限制了 ...

  8. 记录一笔关于PHPEXCEL导出大数据超时和内存溢出的问题

    通过查阅资料可以找到PHPEXCEL本身已经有通过缓存来处理大数据的导出了.但是昨晚一直没有成功,这可捉急了.最后想来想去就替换了phpExcel的版本了.最后就成功了.话不多说,代码附上 <? ...

  9. Office Open XML导出大数据

    Office Open XML导出大量数据到 Excel .NET使用Office Open XML导出大量数据到 Excel我相信很多人在做项目的都碰到过Excel数据导出的需求,我从最开始使用最原 ...

随机推荐

  1. URL中的hash(井号)

    1.#的含义 #代表网页中的一个位置,其右边的字符,就是该位置的标识符.比如 http://www.example.com/index.html#print 就是代表index.html中的print ...

  2. ERROR 1130 (HY000): Host '192.168.20.165' is not allowed to connect to this MySQL server

    问题 远程连接mysql时遇到如下问题: ERROR 1130 (HY000): Host '192.168.20.165' is not allowed to connect to this MyS ...

  3. .net与com组件

    在使用.net中注册组件,有三种方式: 1.手动注册: win9x/NT/2000系统提供一个用于注册进程内组件的实用工具RegSvr32.exe,如regsvr32 c:\test.dll:在.NE ...

  4. 敏感词文本文件 filtered_words.txt,里面的内容为以下内容,当用户输入敏感词语时,则打印出 Freedom,否则打印出 Human Rights

    敏感词文件内容: 代码: def filtered_words(path='filtered_words.txt'): words = [] with open(path, 'r', encoding ...

  5. HDU 2063 过山车(匈牙利算法)

    过山车 Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissio ...

  6. POJ 3666 Making the Grade (线性dp,离散化)

    Making the Grade Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) T ...

  7. MariaDB管理系统

    MariaDB管理系统 [root@c4kaichen@163 ~]# yum install mariadb[root@c4kaichen@163 ~]# yum install -y mariad ...

  8. [UE4]换枪需要做的事,容器:数组、集合、Map

    换枪: 1.需要同时保存多把枪 2.换下去的枪需要隐藏,而不是销毁 3.换枪应该有动作 4.不同的枪应该有不同的行为 蓝图中常见的容器 1.数组 特点: 1.元素连续存放 2.通过索引访问 3.索引从 ...

  9. [UE4]GameMode

    GameMode定义了正在玩的游戏规则,积分等方面,游戏中有些数据和逻辑不适合放在某一个对象身上,这些数据在整个游戏运行中腰持续存在的(比如:积分.排名). 每次游戏一启动,GameMode就被创建, ...

  10. Vuex 状态管理模式

    Vuex 是一个专为 Vue.js 设计的状态管理模式 vuex解决了组件之间同一状态的共享问题.当我们的应用遇到多个组件共享状态时,会需要: 多个组件依赖于同一状态.传参的方法对于多层嵌套的组件将会 ...