如何用ajax实现加载显示

Question

我正在使用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循环，用于回显带有断点的数字以进行测试。 如果我关闭了small_loader函数，这确实可以工作。 为什么是这样？

Answer 1

您将#sub_menu设置为“正在加载...”，然后将AJAX内容放到此处，最后在禁用加载程序时用''覆盖它，覆盖ajax响应。

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

Answer 2

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

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