javascript - 等待外部ajax请求时显示动画

Question

用于 GUI 操作的 JavaScript 调用 JavaScript 进行数据处理。我想在等待外部 ajax 请求时显示动画。例如:gui.js有方法showData(id)和data.js有一个功能getData(id) 。里面showData(id)我调用getData(id) 。里面getData是 $ajax用于从数据库获取数据。我想在 showData(i) 时显示动画等待getData() .

我发现了很多在另一个 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));}

Answer 1

在 html 元素中添加动画。

紧接在 ajax 请求“显示”元素之前。当 ajax 请求“成功”时，再次“隐藏”它。

即。

html

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

js

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

}