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

【问题标题】：how to Show a spinner while a servlet get call gets data from server?如何在 servlet get 调用从服务器获取数据时显示微调器？
【发布时间】：2013-06-05 17:46:37
【问题描述】：

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

var myJSONObject = null;

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

【问题讨论】：

ajaxStart() and ajaxComplete 这些功能可以帮到你。

标签： javascript jquery html servlets

【解决方案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();
    });

     });

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：