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

我打电话给一个生成Excel文件的web服务，当它完成时，用户可以下载文件。该文件大约需要20秒才能生成。有没有一种方法使用jQuery给用户一些反馈，他们必须等待几秒钟，而不是状态栏。我不喜欢保存或缓存文件serverside。生成下载文件时的友好等待消息

我希望类似下面的工作，但显然它不会

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

     });

所以我想是保持UI活着，而正在生成下载

来源

2011-05-30 Arnoldiusss

我想要一个类似的问题，当我想用ajax执行一些操作时，并没有花费太多时间，但足以让用户思考“发生了什么？难道是在做我想要什么？”。

我发现一个jQuery插件称为blockUI（太酷了！），其显示的消息，而你正在处理你的东西。

这里是我如何使用它。首先

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>

就是这样，H操作它有帮助！ ;）

来源

2012-04-27 15:02:00 Manei

thanx，看起来不错，我可能会实现它。 – Arnoldiusss 2012-04-29 09:45:20

尝试过。不起作用。总是一个错误:( – djack109 2017-10-26 07:55:31

这应该工作：

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

来源

2011-05-30 14:41:00 aquinas

这不完全是我想要完成的用户体验。当你点击链接时，div会出现，但是UI会冻结。 Iam正在寻找动画保持运行的姿态，之后正在提供下载或显示错误消息。 – Arnoldiusss 2011-05-30 21:35:16

请将“正在生成文件时请稍候”替换为动画GIF :)。我不知道你还在寻找什么... – aquinas 2011-05-31 18:48:15

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

来源

2011-05-30 14:43:49

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

回答

相关问题