Question

在下面的代码中，我正在创建一个servlet get请求并将输出分配给一个javascript变量，大约需要1分钟才能获得数据。我想知道如何加载一个微调器，直到get请求完成。请帮帮我。

var myJSONObject = null;

function getJsonData(){
$.get("getData", function(data) {
    myJSONObject = data;
});

Answer 1

谢谢大家。我找到了解决方案：

Html代码：

<div id="spinner" class="spinner" style="display:none;">
    Getting value. Please wait....<br>
    <img id="img-spinner" src="loader.gif" alt="Loading"/>
</div>


$(document).ready(function(){
    $("#spinner").bind("ajaxSend", function() {
          $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });

     });

Answer 2

使用

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

其中loadingDiv是带有微调器图像的div。将loadingDiv的css设置为

#loading {
  width: 100%;
  height: 100%;
  position: fixed;
  opacity: 1;
  z-index: 99;
  margin: auto;
}

在加载div时加载加载器的gif。

Answer 3

试试这个：

function getJsonData() {
    var spinner = $('<img src="spinner.gif"/>').addClass('spinner').
                      appendTo('body');
    $.get("getData", function(data) {
        myJSONObject = data;
        spinner.remove();
    });
}

如何在servlet获取调用时显示一个微调器从服务器获取数据？

3 个答案: