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

Question

我有一个通过 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 就会被执行，点击后，加载程序就会运行，但即使在我收到回复(在控制台中)后，加载程序也会继续运行，但实际上它应该已经消失了。

Answer 1

您应该在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();
                    }
            });