場景:
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提交下載文件的返回值,遮罩層去掉的方法沒有發起的時機。放棄。。。。
下載的時候使用打開新的空白窗口的方法形成交互告知用戶正在操作,下載完之後新窗口就自己關掉了,這樣用戶也不會點第二次下載按鈕,放開按鈕的定時也不用了,自己的安心的等,數據量少的時候就很快,上萬了,就安心的等一會吧。