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

Question

用于 GUI 操作的 JavaScript 调用用于数据处理的 JavaScript。我想在等待外部 ajax 请求时显示动画。 例如：gui.js 具有方法 showData(id)，data.js 具有函数 getData(id)。在showData(id) 里面我打电话给getData(id)。在getData 内部是一个$ajax，用于从数据库中获取数据。我想在showData(i) 等待getData() 时显示动画。

在另一个 ajax-request 成功后，我发现了很多用于发出 ajax-request 的方法，但我的问题没有解决方案。

更新： 立即获取详细信息。也许我可以返回 $.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
    }
});

}

Answer 2

创建 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));}