收到AJAX结果后加载器不消失

Loader not disappearing after AJAX result is received

本文关键字：消失加载 AJAX 结果收到更新时间：2023-09-26

我有一个通过AJAX显示数据的页面，直到结果被获取的时候，我希望显示一个加载器，一旦结果被获取，我希望加载器应该消失。下面是我试图显示加载器

的部分代码

var onSubmit = function(e) 
    {
        var txtbox = $('#txt').val();
        var hiddenTxt = $('#hidden').val();
        $("#walkaway").hide();
        $("#submitamt").hide();
        $("#xtrabutton").hide();
        LodingAnimate();
        $.ajax(
            {
                type: 'post',
                url: 'test2.php',
                dataType: 'json',   
                data: {txt: txtbox,hidden: hiddenTxt},
                cache: false,
                success: function(returndata) 
                    {
                        $('#first').html(returndata[0]);
                        $('#second').html(returndata[0]);
                        $('#third').html(returndata[0]);
                    },
                error: function() 
                    { 
                        console.error('Failed to process ajax !');
                    }
            });
            function LodingAnimate() 
            {
                $("#maillist").html('<img src="img/ajax-loader.gif" /> Please Wait Loading...');
            }   
    };

点击一个按钮，上面的AJAX被执行，点击加载器运行后，但即使在我得到回复(在控制台上)加载器继续运行，但在实际中它应该已经消失。

您应该在ajax调用完成后手动隐藏/删除加载器，添加Jquery Complete回调并添加代码以删除其中的加载器

Jquery Complete -此回调将在成功和错误回调执行后执行。

     $.ajax(
            {
                type: 'post',
                url: 'test2.php',
                dataType: 'json',   
                data: {txt: txtbox,hidden: hiddenTxt},
                cache: false,
                success: function(returndata) 
                    {
                      //Success code
                    },
                error: function() 
                    { 
                        //error code
                    },
                complete:function()
                    {
                     //This block will execute after success/error executes.
                     //Make the loader div empty
                     $("#maillist").empty();
                    }
            });