场景:
form表单提交post请求到controller,后台设置返回的头信息,浏览器执行下载操作。
现状:导出按钮点击后开始定时10秒之内不让点击,到时间再放开。结果用户反应点了之后浏览器没反应。他妈的快1w数据了,你让我下载能反应多快,我后台不计算啊。
要求:下载的时候加遮罩层,等待gif,下载完之后取消遮罩
实现思路:下载完之后获取返回值,根据结果执行方法去掉遮罩
最终结果:失败,换其他方法实现
实现方法一
1、原来按照form的submit,那我获取后台的返回就可以了,后台方法加上response注解,返回一个json串,里面写好成功标记。
2、form点击提交之后,显示遮罩层,下载完之后,还是去不掉,获取不到返回。
实现方法二
1、换ajax提交请求
type: "POST",
data: $('#Form').serialize(),
url: localHost + "/cold/inventorySnapshot/exportUserWMSPctInvSnapshotInfo",
success: function (msgs) {
hideLoading();
},
结果发现遮罩层去掉了,文件没有下载。F12之后看见返回全他妈的解析成字符串了,文件的毛都没看见
结论根据参考
https://www.cnblogs.com/qlqwjy/p/8971207.html
,我决定放弃这种方法。
实现方法三:
1、用jquery.form.js
$('#Form').ajaxForm(function() {
alert("Thank you for your comment!");
hideLoading();
}).submit();
是我写的不对吗,还是咋的,妈蛋的还是没有下载下来,后台已经走到了这个下载的方法里面。alert也弹出来了,遮罩也去掉了,浏览器就是不下载。
实现方式四:
1、window.open(url)写一个开新窗口的方法,不获取返回值了,浏览器下载完直接关掉新窗口。
2、妈蛋我7个参数,我还一个一个的写进去
postForm = document.createElement("form");
postForm.id = "postForm";
postForm.method = "post";
postForm.action = url;
postForm.target = "";
var 参数XXX = document.createElement("input");
参数XXX.type = "hidden";
参数XXX.name = "applyNo";
参数XXX.value = $("#XXXX").val();
postForm.appendChild(参数XXX);
写到最后我发现,新开一个窗口的这种瞎操作,为什么不在原来提交form的时候指定打开新窗口呢???他不香吗
最终方法:
<sf:form id="exportForm" method="post"
target="_blank"
class="form-horizontal m-t"
cssClass="form-horizontal"
action="XXXXXXXXXXXXXXXXXXXXXXXXXXX">
target="_blank"就能打开新的窗口啊,干嘛要window.open搞那些没用的玩意,直接提交就行了。
总结:根绝要求,遮罩层实现了,各种折腾之后发现拿不到form提交下载文件的返回值,遮罩层去掉的方法没有发起的时机。放弃。。。。
下载的时候使用打开新的空白窗口的方法形成交互告知用户正在操作,下载完之后新窗口就自己关掉了,这样用户也不会点第二次下载按钮,放开按钮的定时也不用了,自己的安心的等,数据量少的时候就很快,上万了,就安心的等一会吧。