javascript - 如何在 servlet get 调用从服务器获取数据时显示微调器？

Question

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

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