从 JavaScript 检索表单提交的状态

retrieve the status of a form submission from javascript

本文关键字：状态 表单提交 检索 JavaScript      更新时间：2023-09-26

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

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

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

我尝试使用此解决方案：

  1. 向页面添加不可见的 iframe
  2. 让表单使用目标属性发布到 iframe
  3. 使用 iframe 的 onLoad 事件（由表单帖子触发）重置我的按钮

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

我选择的解决方案使用 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
相关文章：