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

问题描述

| 我正在调用一个生成Excel文件的网络服务，完成后，用户可以下载该文件。 生成此文件大约需要20秒。有没有一种使用jQuery的方式向用户提供一些反馈，而状态栏除外。 我更喜欢不保存或缓存文件在服务器端。 我希望下面的内容可以工作，但显然不行

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

        });

所以我想要的是在生成下载时保持ui处于活动状态     

解决方法

        当我想用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>

就是这样，希望对您有所帮助！ ;）     ,        这应该工作：

   <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>

    ,        

<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\");
}