如何用ajax实现加载显示

How to implement loading display with ajax

本文关键字：加载 显示 实现 ajax 何用      更新时间：2024-04-13

我使用ajax从php文件返回数据。但如果出现加载显示，比如动画gif之类的，会很好看。我曾经尝试过使用文本，但没有注意到。有比我更好的方法吗。

function small_loader(t){
    if(t === 'show'){
        $('#sub_menu').html('Loading');
    }else{
        $('#sub_menu').html('');
    }
}
function loadtools(t){
    var tools = 'tools/'+t+'.php';
    $.ajax({
        url:tools,
        type:'POST',
        beforeSend: function(){
            small_loader('show');
        },
        success: function(e){
            $('#sub_menu').html(e);
        },
        complete:function(){
            small_loader('hide');
        }
    });
}

目前，php文件上只有一个for循环，它用kine break来回显数字，用于测试目的。如果我关闭small_loader函数，这确实有效。为什么会这样？

您将#sub_menu设置为"正在加载…"然后把AJAX的东西放在那里，最后在禁用加载器时用"覆盖它，覆盖AJAX响应。

尝试为加载程序使用不同的div，也许可以隐藏#sub_menu并在它完成时显示它。

您应该在HTML中添加加载程序（在正确的位置，比如启动ajax请求的按钮旁边），将其隐藏在css中（显示：none），在发送请求之前显示它，并在返回响应时隐藏它：

function loadtools(t){
    var tools = 'tools/'+t+'.php';
    $.ajax({
        url:tools,
        type:'POST',
        beforeSend: function(){
            $("#your_loader_wrapper_id").show();
        },
        success : ...,
        error : ...,
        complete: function(e){
            $("#your_loader_wrapper_id").hide();
            $('#sub_menu').html(e);
        }
    });
}
相关文章：