javascript - 从 javascript 检索表单提交的状态

Question

我有一个 Web 应用程序，用户可以通过单击按钮导出结果。据我所知，不可能从 JavaScript 启动文件“下载”，因此我使用简单的服务器往返来开始下载:

1. 用户点击导出按钮
2. 某些 JavaScript 创建一个隐藏表单字段，其中包含我想要在文件中保存的数据
3. 触发表单提交
4. 服务器获取表单数据并将其作为文件发送回用户
5. 触发文件下载

由于上传数据可能需要一些时间，因此我在步骤 1 后将导出按钮上的文本更改为“准备下载”。在步骤 4 或 5 的某个地方，我想将按钮更改回正常状态。有没有办法知道浏览器何时开始接收 post 请求的响应？

Answer 1

我尝试使用此解决方案:

1. 向页面添加不可见的 iframe
2. 使用 target 属性让表单发布到 iframe
3. 使用 iframe 的 onLoad 事件(由表单发布触发)重置我的按钮

这在 Firefox 中有效，但当服务器响应是文件时，onLoad 事件不会在 Chrome 中触发。

我选择的解决方案使用 cookie 并且适用于所有浏览器:

1. 当用户点击下载按钮时，向包含随机值的表单添加一个隐藏字段。
2. 在服务器上，查找包含随机值的表单字段并设置具有相同值的 cookie。该 cookie 将在下一个服务器响应时设置，即在下载开始时设置。
3. 在客户端上，开始每隔一秒左右轮询一次 Cookie，以查找第 1 步中的随机值。
4. 客户端找到该值后，重置按钮。

这是下载按钮事件处理程序中的相关代码，其中 #nonce 是我放置随机值的隐藏字段:

var nonce = Math.random();                      // generate random number
$("#nonce").val(nonce);                         // set number as field value
$("#downloadDataset").button('loading');        // set button to loading state
var downloadTimer = setInterval(function () {   // start polling the cookies
    if (document.cookie.indexOf(nonce) != -1) {
        $("#downloadDataset").button('reset');  // reset button
        clearInterval(downloadTimer);           // stop polling the cookies
    }
}, 1000);                                       // check every 1000ms