Question

我有一个HTML页面，在文档准备好后调用JavaScript方法。但是我希望在加载时显示为刷新状态，有没有办法可以做到？

此外，getDonars（）方法在等待响应时对服务器进行Ajax调用我想显示一个状态，说明如何实现这一点？

因为我的服务器调用稍有延迟，然后如果你打开页面，看起来没有任何内容，但几秒后数据会弹出。对我的问题有更好的解决方法吗？

javascript代码

function getDonars() {

  if (window.XMLHttpRequest) { 
      xmlhttp = new XMLHttpRequest();
  } else { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

          document.getElementById("donars").innerHTML = xmlhttp.responseText;

      }
  }

  xmlhttp.open("GET", "http://www.xyz.com/cfv/getDonars.php", true);
  xmlhttp.send();
}

Html代码

 <script>
      $(document).ready(function(){
           getDonars();

      });
</script>
 <div data-role="main" class="ui-content" >

      <div data-role="collapsible" data-collapsed="false" >
        <h3 align="center"><B>Donar List </B></h3>
             <div data-role="fieldcontain" >
                <div id="donars"></div>
            </div>
       </div>

 </div>

Answer 1

试试这个

<div class="loading_msg" style="display:none">Processing</div>

尝试使用beforeSend的{{1}}和complete设置：

$.ajax

Answer 2

在您的onreadystatechanged活动中，您可以查看xmlhttp.readyState

if (xmlhttp.readyState < 4) {
  showLoadingMessage()
}

因为你必须写showLoadingMessage()来显示信息/图像/粉红色的蓬松鸡肉。

当xmlhttp.readystate == 4你想要隐藏你的信息/图像/粉红色的蓬松鸡肉时。

Answer 3

在这里，您可以获得所需的所有答案 http://xhr.spec.whatwg.org/

Answer 4

所以基本上你想要实现的是在等待来自服务器的响应时向用户显示消息。 JQuery插件BloukUI非常适合您的需求。请从他们的演示页面查看Blue Overlay的第三个示例：http://malsup.com/jquery/block/#demos。

Answer 5

我建议使用Jquery Get来做到这一点。 Example

<style>
.loading{
    margin:20% 40%;
    position: fixed;
    width: 200px;
    height: 50px;
    z-index: 1000;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff;
    border:2px solid #444;
    -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
</style>

Jquery的

<script>
    $(document).ready(function(){
    $(".loading").fadeOut(0);   



        $(".loading").html("<center><img src='images/waiting.gif'><br>Loading...</center>");

            $(".loading").fadeIn(0);
            $.get("http://www.xyz.com/cfv/getDonars.php", { 

            })
            .done(function(data) {
                $("#donars").html(data);
                $(".loading").fadeOut(200); 

            }).fail(function() {
            alert( "error" );
            });

});
<script>

如何在处理请求时在jquery / ajax中显示消息？

5 个答案: