生成下载文件时的友好等待消息答案

【问题标题】：Friendly wait message while download file being generated生成下载文件时的友好等待消息
【发布时间】：2011-09-04 20:51:45
【问题描述】：

我正在调用一个生成 Excel 文件的 Web 服务，完成后用户可以下载该文件。生成此文件大约需要 20 秒。有没有办法使用 jQuery 给用户一些反馈，除了状态栏之外，还需要等待几秒钟。我不喜欢在服务器端保存或缓存文件。

我希望像下面这样的东西会起作用，但显然它不起作用

   var myhref = "DownloadFile.ashx?foo=bar"
   $.get(myhref, function (data) {
            window.location = this.href;
        },
        function (data) {
            alert("Could not generate file");

        });

所以我想要的是在生成下载时保持 ui 活跃

【问题讨论】：

标签： jquery asp.net web-services

【解决方案1】：

当我想使用 ajax 执行一些不需要太多时间但足以让用户思考“发生了什么？它在做我想要的事情吗？？”时，我遇到了类似的问题。

我发现了一个名为 blockUI 的 jQuery 插件（真的很酷！），当你处理你的东西时它会显示一条消息。

这就是我如何使用它。首先是处理请求的函数：

function proceedToSend( requesterName, requesterId )
{
    //Here the wait/processing message is displayed
    $().ajaxStart($.blockUI({ message:$('#waitMessage')}));

    $.ajax({
        type    :"POST" ,
        url     : http://example.com/myurl.php
        dataType: yourDataType ,
        data    : myData ,
        success :function ( response )
        {
            //response processing if needed

            // Here the wait/processing messages is hidden
            $().ajaxStop($.unblockUI({ message:null }));
        } ,
        error   :function ()
        {
            alert('there was an error processing the request!!');
            $().ajaxStop($.unblockUI({ message:null }));
        }
    });
}

最后你必须在你的页面上添加这个，这样消息才会显示出来：

<div id="waitMessage" class="dataContainer" style="display: none;">
    <p style="font-size: 30px;">Processing request...</p>
</div>

就是这样，希望对你有帮助！ ;)

【讨论】：

【解决方案2】：

这应该可行：

   <div id="waitMessage" style="display:none">
           Please wait while the file is generated
   </div>

<a href='DownloadFile.ashx?foo=bar' id='download'>Download me</a>


<script type="text/javascript">
        $(function () {           
            $("#download").click(function () {
                $("#waitMessage").fadeIn()
            });
        });
    </script>

【讨论】：

这不完全是我想要完成的用户体验。单击该链接时，会出现 div，但随后 UI 会冻结。我正在寻找一种动画持续运行的情况，然后提供下载或显示错误消息。
请用“生成文件时请稍候”代替动画 gif :)。我不确定您还在寻找什么...

【解决方案3】：

<input type="button" onclick="example_ajax_request()" value="Click Me!" />
<div id="example-placeholder">
  <p>Placeholding text</p>
</div>

function example_ajax_request() {
  $('#example-placeholder').html('<p><img src="/images/ajax-loader.gif" width="220" height="19" /></p>');
  $('#example-placeholder').load("/examples/ajax-loaded.html");
}

【讨论】：