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请求，但没有解决我的问题。

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

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

2 个答案: