关于搜索内容时提示正在加载请稍候的问题

Question

    如题，当点击搜索按钮时，有时可能是因为网速慢或内容多，搜索所用时间长的话，为了给用户一种良好的感觉，搜索的那会让页面切换成“正在搜索，请稍候”
    关于AJAX的那个控件，我不怎么看好，因为它是在后台代码里控制休睡多少秒来切换的，可是根据网速或内容怎么来计算它的所耗时间呢。我想问下还有没有其它的办法了
    我的思路是：搜索页面是一个层，还有一个Load层，当点击搜索按钮时，让Load层显示，搜索页面层隐藏,当数据检索完后让load层隐藏，可是我实现不了这样的功能。不知道是哪里有错。
    希望你们能给我提出一些好的建议，分实在不多，为了同一个梦想，请伸出援助之手吧，谢谢啦

Answer 1

那就用jquery
$.ajax({
            type: 'POST',
            data: { key: escape(key) },
            dataType: 'json',
            url: 'jsonData.ashx',
            beforeSend: function(XMLHttpRequest) {
                $('#query').after('<a class="load">读取信息中……</a>');
            },
            success: function(data) {
                if (data.success == true) {
...//加载数据
}
},
 complete: function(XMLHttpRequest) {
$('.floatTip').fadeOut('slow', function() {
                    $(this).remove();
...//显示数据
}}

Answer 2

您好，能给我一段完整的代码吗？我没接触过jquery，不懂事什么意思

Answer 3

<asp:ScriptManager ID="ScriptManager1" runat="server">  
  </asp:ScriptManager>  
  <asp:UpdatePanel ID="upl" runat="server" UpdateMode="Conditional">  
  <ContentTemplate>  
  <asp:UpdateProgress ID="UpdateProgress1" runat="server">  
  <ProgressTemplate>  
  <div>  
  <div>数据加载中，请等待…… </div>  
  </div>  
  </ProgressTemplate>  
  </asp:UpdateProgress>  
</asp:UpdatePanel>    <asp:ScriptManager ID="ScriptManager1" runat="server">  
  </asp:ScriptManager>  
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
  <Triggers>  
  <asp:AsyncPostBackTrigger ControlID ="Button1" EventName ="Click" />  
  </Triggers>  
  <ContentTemplate>  
  <asp:Label ID="Label1" runat="server" Text="Label"> </asp:Label>  
  </ContentTemplate>  
  </asp:UpdatePanel>  
  <asp:UpdateProgress ID="UpdateProgress1" runat="server">  
  <ProgressTemplate>  
  <span style =" font-size:12px">数据更新中...... </span>  
  </ProgressTemplate>  
  </asp:UpdateProgress>  
  <asp:Button ID="Button1" runat="server" Text="Button" Width="143px" OnClick="Button1_Click" />  
或使用div显示loading效果  
<script language="javascript" type="text/javascript">   
  document.write(" <div id='loadDiv' style='padding-top: 250px; padding-left: 350px;font-size:x-large;height:400px'> <span id='loading'> <img src=\"../Images/loader2.gif\"/>正在加载数据，请稍候··· </span> </div>");  
  window.onload = function()  
  {   
  document.getElementById("hiddenDiv").style.display="";   
  document.getElementById("loadDiv").parentNode.removeChild(document.getElementById("loadDiv"));   
    
  }   
  </script>