jquery - 生成下载文件时出现友好的等待消息

Question

我正在调用一个生成 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");

        });

所以我想要的是在生成下载时保持用户界面处于事件状态

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

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