在等待外部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请求时显示动画

回答

相关问题