2013-11-01 15 views
1

我有一个Web应用程序,用户可以通过单击按钮导出结果。据我知道这是不可能的启动从JavaScript文件“下载”,所以我用一个简单的服务器往返行程,开始下载:从javascript中检索表单提交的状态

  1. 用户点击导出按钮
  2. 一些JavaScript创建包含我想要的文件
  3. 表单提交触发
  4. 的服务器中的数据隐藏的表单字段的形式为数据并将其发送给用户的文件
  5. 一个文件下载时触发​​

因为上传数据可能需要一些时间,所以我在步骤1之后将导出按钮上的文本更改为“正在准备下载”。在步骤4或5周围的某处,我想将按钮更改为正常。有什么方法可以知道浏览器何时开始接收来自发布请求的响应?

+0

技术上*有*的方式从JavaScript开始下载。例如。 http://stackoverflow.com/questions/17126453/html-table-to-excel-javascript/17129220#17129220 –

+0

不幸的是,一个数据网址的最大长度是非常有限的: _“data:”URL方案仅用于短的价值。请注意,一些使用URL的应用程序可能会施加长度限制;例如,嵌入在HTML中的定位符中的URL具有由HTML的SGML声明[RFC1866]确定的长度限制。 LITLEN(1024)限制了可以出现在单个属性值文字中的字符数,ATTSPLEN(2100)限制了出现在标签中的所有属性值规格的所有长度的总和,并且TAGLEN(2100)限制了标签的总长度._ – bmesuere

回答

0

我尝试使用此解决方案:

  1. 一个无形的iframe添加到页面
  2. 让表单提交到iframe中使用目标属性
  3. 使用的iframe的onload事件(被触发表单帖)重置我的按钮

这适用于Firefox,但当服务器响应是文件时,Chrome中不会触发onLoad事件。

我选定了该解决方案使用Cookie,并在所有浏览器上运行:

  1. 当用户点击下载按钮,添加一个隐藏字段包含一个随机值的形式。
  2. 在服务器上,查找包含随机值的表单字段并设置具有相同值的cookie。该cookie将设置下一个服务器响应,因此下载已经开始。
  3. 在客户端,开始轮询的饼干每秒左右去寻找随机值从步骤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