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

        });

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

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>

就是这样，希望它有所帮助！ ;）

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

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

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

3 个答案: