监听表单提交 -> 文件下载事件答案

【问题标题】：Listening for form submit -> file download Event监听表单提交 -> 文件下载事件
【发布时间】：2016-11-10 12:02:10
【问题描述】：

在一个 JSP 文件中，我有这个简单的形式：

<form action="#" method="post" id="extract_form">

并基于几个select参数，通过Servlet中的这段代码返回一个.zip文件：

ServletOutputStream sos = response.getOutputStream();
response.setContentType("application/zip");
response.setHeader("Content-Disposition", "attachment; filename=\"" + zipFile.getName() + "\"");

-后跟一些sos.write(byteArray);

所有这一切都很好，但是创建 zip 文件所需的时间取决于表单参数，我想在表单提交时显示“请稍候”blockUI 弹出窗口，然后当.zip 文件已被浏览器接收。

显示弹出窗口没有问题，但是在收到文件后我很难让它再次自动消失！我该如何做到这一点？

如果尝试过以下方法：

1：在

中显式$.unblockUI()

jQuery(document).ready(function($) { ... }

-但是.zip文件发送后没有触发ready()事件，即.jsp没有重新加载。

2：像this one 这样的解决方案。调用成功回调函数，但未下载 .zip 文件。不过，我认为 .zip 文件通过传递给成功时调用的函数的响应对象以二进制形式传输到浏览器。

3：扫描jQuery网页寻找要监听的事件，但我只找到了动作的触发（$('#form').submit(...)），而不是它的响应。

【问题讨论】：

为什么不使用 jQuery 的 get 和 post 方法？您可以收听 done、fail 和 always 事件。 api.jquery.com/jquery.get 当您发送请求时，您会显示您的弹出窗口，并且在 always 方法中您只需将其删除即可。
@Botond，这正是我尝试过的，见 2），但响应被成功函数调用“捕获”，而不是传播到浏览器（我猜）。

标签： jquery forms jsp download blockui

【解决方案1】：

哦，尤里卡！

我在$.post 中将return false 更改为return true，现在它可以工作了！

var $form = $('#extract_form');
$form.submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(response) {
        $.unblockUI();
    }, 'text');
    return true;
});

【讨论】：