javascript - サーブレット get 呼び出しがサーバーからデータを取得している間にスピナーを表示する方法は?

Question

次のコードでは、サーブレットの 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();
    });
}