ajax/html/javascript 解决方案禁用报告生成按钮然后可更新答案

【问题标题】：ajax/html/javascript solution to disableing button for report generation and then reneableajax/html/javascript 解决方案禁用报告生成按钮然后可更新
【发布时间】：2011-12-29 04:33:02
【问题描述】：

我有一个控制器 (Spring-MVC)，它在获取请求时生成 PDF 报告。控制器设置标题，如“application/OCTET-STREAM”、“Content-Disposition”、“attachment; filename=\”” + filename + “\””，以便用户获得强制保存/打开对话框。控制器获取生成的 pdf 并将 pdf 字节直接写入响应的输出流。返回的 ModelAndView 为 null。

问题是我需要/想要在单击后禁用生成报告请求的按钮，然后在报告完成后重新启用它以防止双击。

我认为我可以使用prototype.org 的Ajax.Request 来执行此操作...这段代码确实可以正常使用按钮，但后来我被卡住了，因为客户端从未获得pdf。我猜我需要对响应做些什么，但我不知道是什么。任何想法/帮助表示赞赏。

function displayPdf(button_b, pdf_url) {
   button_b.disabled = true;
   new Ajax.Request(pdf_url, {
       asynchronous:true,
       evalScripts:true,
       method:'get',
       onComplete: function(response) {
         button_b.disabled = false;
      },
      onFailure: function() {
          redAlert('crap');
     }
   });
}

【问题讨论】：

标签： javascript ajax web-applications prototypejs

【解决方案1】：

假设您仍在强制下载，我认为完成您想要的所有事情的最佳方式是我认为的：

<html>
<head>
    <script>
        function get_it() {
            document.getElementById('the_button').disabled = true;
            document.getElementById('the_frame').src = "http://www.ca3.uscourts.gov/opinarch/063575p.pdf";
        }
        function enable_button() {
            document.getElementById('the_button').disabled = false; 
        }
    </script>
</head>
<body>
    <iframe id='the_frame' onload='enable_button()'></iframe>
    <button id='the_button' onclick='get_it()'>Get it</button>
</body>
</html>

基本上，您是在告诉它将其发送到 iframe 而不是使用 AJAX 请求。 pdf 准备好后，iframe 的 onload 事件将触发，重新启用按钮。您可能希望为此使用实际的事件侦听器，而不是我在示例中使用的已弃用的内联事件侦听器：P

【讨论】：

我不能投票，因为我是菜鸟，但这是一个公平的解决方案。谢谢：D

【解决方案2】：

我猜你只是想防止双击按钮。为什么不在按钮被点击几秒钟后使用setTimeout 来启用该按钮？

setTimeout() example

所以在你的 desplayPdf 函数的开头，你可以输入：

setTimeout("button-b.disabled = false",4000);

这将在单击按钮后禁用按钮 4 秒，然后再启用它。

【讨论】：

是的 - 我只想禁用双击。 setTimeout 是我考虑过的一个选项，但我想要一些更准确的东西，因为报告生成时间可能会有所不同。另外，我只是很好奇它是否可以完成。
我认为您不能完全按照自己的意愿行事，但我的建议和 Chibu 的建议都应该为您提供可行的替代方案。