隐藏 Ajax Div 和 Show Loader Div 直到返回数据答案

【问题标题】：Hide Ajax Div and Show Loader Div until data is returned隐藏 Ajax Div 和 Show Loader Div 直到返回数据
【发布时间】：2016-11-29 17:24:34
【问题描述】：

我正在尝试显示加载器 div，直到返回由 Ajax 填充的 div。所以我想隐藏一个Div“responseDiv”，直到它被Ajax数据填充，同时我想显示一个加载器div。我的 CSS

#loading {
    background: url('images/loading.gif') no-repeat center center;
    position: absolute; 
    display: block;
    /*top: 0%;
    left : 0%;*/
    background-color : #ffffff ;
}

#responseDivOverlay {
position: absolute; 
background-color : #ffffff ;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;  
}

我的两个分区

<div id="loading"></div>
<div id="responseDiv">

我的 JavaScript

我正在尝试显示加载器，直到 getMessage 填充了响应 div 中的数据。

<!-- Slider Code-->
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
          $(function () {
              $("#slider-range").slider({
                  range: true,
                  min: <%=lowestPrice%>,
                  max: <%=highPrice%>,
                  step: 0.01,
                  values: [<%=lowestPrice%>, <%=highPrice%>],
                  stop: function (event, ui) {
                      //alert(ui.values[0] + "-" + ui.values[1]);

                      // HERE, WHAT I HAVE BEEN TRYING SO FAR

                      //setTimeout(function() {
                      //     document.getElementById("responseDiv").style.display='hide';
                      //}, 1000);

                      getMessage("1", ui.values[0], ui.values[1]);

                  },
                  slide: function (event, ui) {
                      $("#amount").val("£" + parseFloat(Math.round(ui.values[0] * 100) / 100).toFixed(2) + " - £" + parseFloat(Math.round(ui.values[1] * 100) / 100).toFixed(2));
                      //$("#amount").val("£" + ui.values[0] + " - £" + ui.values[1]);
                      //parseFloat(Math.round(num3 * 100) / 100).toFixed(2);
                  }

              });
              $("#amount").val("£" + $("#slider-range").slider("values", 0) +
          " - £" + $("#slider-range").slider("values", 1));

          });
      </script>

【问题讨论】：

所有这些：try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; } } 可以简单地替换为：xmlhttp = new XMLHttpRequest();。一段时间以来，所有浏览器都支持原生 XHR。

标签： javascript jquery css ajax

【解决方案1】：

为什么不使用 css 隐藏“responseDiv”（显示：无）并在 ajax 完成加载后使用 jQuery 更改它的状态？

【讨论】：

如何使用 jQuery 更改其状态？我怎么知道 Ajax 何时完成加载？
阅读有关发送 Ajax 请求的信息，然后您就会知道如何去做..

【解决方案2】：

您可以使用 css 选择器更改 div 的可见性。隐藏： $("#MyDivId").display = none; 显示： $("#MyDivId").display = block;

【讨论】：

那么你可以简单地做$("#MyDivId").show()和$("#MyDivId").hide()