在等待外部ajax請求時顯示動畫

用於GUI操作的JavaScript調用用於數據處理的JavaScript。我想在等待外部ajax請求時顯示動畫。例如：gui.js具有方法showData(id)和具有功能getData(id)。在showData(id)裏面我打電話getData(id)。 getData內部是用於從數據庫獲取數據的$ajax。我想顯示一個動畫，而showData(i)等待getData()。在等待外部ajax請求時顯示動畫

我已經找到了很多ajax請求後，另一個Ajax請求成功，但沒有解決我的問題。

更新：獲取詳細信息。也許我可以返回$ .ajax並使其異步。

function getData(id) { 
var ajaxResult = $.ajax({ 
    type : 'POST', 
    url : '/ajax/getData.php', 
    data : {'id' : id}, 
    dataType : 'json', 
    async: false, 
    error : function() { 
     console.log("FAILURE on getting" + id); 
    } 
}); 
return ajaxResult.responseText;}

showData應調用getData（）。

function showDetails(id) { 
$('#ElementInfo').html(""); 
var jsonData = getData(); //while that show load 
//hide load animation 
$('#ElementInfo').html(makeHtml(data));}

來源

2016-05-23 kayf

嘗試什麼.. –

你確定你沒發現有關互聯網對您的問題什麼？ –

可以說有一個ID爲「someId」的元素，您希望顯示從ajax響應中返回的內容。將動畫添加到ID爲someId的元素，並在返回數據時使someId的長度爲零（動畫將被隱藏），並將響應附加到ID爲someId的元素。它應該工作 – viveksinghggits

在html元素中添加動畫。

緊接在ajax請求之前「顯示」元素。從ajax請求中「成功」，再次「隱藏」它。

即。

HTML

<div class="animation">animation here</div>

$("#animation").show() 
$.ajax({ 
    type:"GET", 
    url:"/whatever/url" 
    dataType:"json", 
    success:function(response){ 
     $("#animation").hide(); 
     //then do what you need to do with your response 
    } 
});

}

來源

2016-05-23 12:23:41

爲什麼'能見度：隱藏的'？爲什麼不'display：none' –

Sry我的問題是，我不允許從getDetails中的ajax-Request更改GUI。爲了更好地解釋它：我想在showData（id）裏面創建一個AjaxReqest，等待從getData（id）完成ajax-Request。 – kayf

創建2個類之一就是讓DIV隱藏。

.hidden{ 
display:none; 
}

第二個顯示圖像。

.show_image{ 
position:fixed;top:0;right:0;bottom:0;left:0; 
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%; 
z-index:100; 
background-size: 5ex; 
}

和你的HTML代碼將

<div class="show_image hidden"></div> 
<div class="box"> Your content </div>

最初加載圖像是在隱藏模式。現在，在發送Ajax請求之前，請取消隱藏加載映像，並在獲得服務器響應後隱藏它。

$.ajax({ 
      url: "http://wwww.example.com", 
      type: 'POST', 
      data: yout_data, 
      dataType: 'json', 
      //async: true, 
      //cache:true, 
      success: function(data) { 
       result = data; 
      $('.show_image').addClass("hidden"); 
      }, 
      error: function() { 
       console.log("error: load handler failed: " + url); 
       result = "null"; 
      } 
     });

加載圖像將出現在頁面中間，背景將變爲透明。如果您發現任何困難，請讓我知道。

根據你的代碼：

function showDetails(id) { 
$('#ElementInfo').html(""); 
$('.show_image').removeClass("hidden"); // Now the image will be displayed 
var jsonData = getData(); // it will request the data to be return 
// in the ajax request i have stopped animation "in success" 
$('#ElementInfo').html(makeHtml(data));}

來源

2016-05-23 12:34:21 Ramkee

我知道這樣做的正常方式，但我想等待另一個Ajax請求。也許我應該使用when（）。之前（）我顯示等待和之後，當我隱藏它。但我需要getData（）中的數據 - 請求在showData（）中顯示它。 – kayf

當您調用Ajax POST/GET請求時，首先我們將顯示圖像（使用beforeSend），然後在從服務器獲取響應後，我們將隱藏該圖像（使用成功）。這就是我們所說的等待時間。不是嗎？ – Ramkee

是的，這是正確的。但是在getData（）的$ ajax裏面，我不想操縱網頁。 showData裏面我想從getData中獲取數據，然後隱藏動畫。 – kayf

在等待外部ajax請求時顯示動畫

回答

相關問題