Javascript Ajax加载成功后关闭div

大家好，我正在使用一个加载数据的小脚本，在它呈现之前，它会显示一个加载的gif图标，然后表格会显示出来，尽管如此，我从堆栈中复制了这个，我不记得在哪里，我注意到在表格的末尾，当它呈现在末尾时，gif div图标仍然存在D：

我知之甚少，谁能帮我解决这个问题

<script type="text/javascript">
    $(document).ready(function cargar() {
        $('.button').on('click', function cargar() {
            //Añadimos la imagen de carga en el contenedor
            $('#divLoading').html('<div class="loading"><img src="https://i.stack.imgur.com/h6viz.gif" alt="loading" /><br/>Un momento, por favor...</div>');

                $.ajax({
                    url: '@comercial.Models.Base.DirectorioRaiz()PagosRecibidos/ConsultaPagosRecibidos',
                    type: 'post',
                    dataType: 'text',
                    contentType: 'application/x-www-form-urlencoded',
                    data: $("#formFiltros").serialize(),
                    success: function (response) {
                        $('#divConsultaPagosRecibidos').html(response);
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            return false;
        });
    });
</script>

$（文档）.ready（函数cargar（）{
$（'.button'）。在（'click'，function cargar（）上{
//卡加和厄尔康多尔的影像
$（'divLoading'）.html（'unmomento，por-favor…'）；
$.ajax({
url:“@commercial.Models.Base.DirectorioRaiz（）PagosRecibidos/ConsultaPagosRecibidos”，
键入：“post”，
数据类型：“文本”，
contentType:'application/x-www-form-urlencoded'，
数据：$（“#formFiltros”）.serialize（），
成功：功能（响应）{
$（'#divconsultapagosrescibidos'）.html（回复）；
},
错误：函数（错误）{
console.log（错误）；
}
});
返回false；
});
});

divLoading仍显示在屏幕底部：( 这些是gif和table同时呈现的div

<div class="row">
    <div id="divConsultaPagosRecibidos" style="width:100%">
        <!--aqui va el html de montos y tabla-->
    </div>
</div>

<div align="center">
    <div id="divLoading" style="width:100%"></div>

</div>

---

您应该在成功回调中隐藏加载程序。 您可以使用jQuery

hide（）

进行此操作

$('#divLoading').hide();

<script type="text/javascript">
    $(document).ready(function cargar() {
        $('.button').on('click', function cargar() {
            //Añadimos la imagen de carga en el contenedor
            $('#divLoading').html('<div class="loading"><img src="https://i.stack.imgur.com/h6viz.gif" alt="loading" /><br/>Un momento, por favor...</div>');

                $.ajax({
                    url: '@comercial.Models.Base.DirectorioRaiz()PagosRecibidos/ConsultaPagosRecibidos',
                    type: 'post',
                    dataType: 'text',
                    contentType: 'application/x-www-form-urlencoded',
                    data: $("#formFiltros").serialize(),
                    success: function (response) {
                        $('#divConsultaPagosRecibidos').html(response);
                        $('#divLoading').hide();
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            return false;
        });
    });
</script>

阅读中有关

hide（）

的更多信息

示例代码如下所示

$('#divLoading').hide();

<script type="text/javascript">
    $(document).ready(function cargar() {
        $('.button').on('click', function cargar() {
            //Añadimos la imagen de carga en el contenedor
            $('#divLoading').html('<div class="loading"><img src="https://i.stack.imgur.com/h6viz.gif" alt="loading" /><br/>Un momento, por favor...</div>');

                $.ajax({
                    url: '@comercial.Models.Base.DirectorioRaiz()PagosRecibidos/ConsultaPagosRecibidos',
                    type: 'post',
                    dataType: 'text',
                    contentType: 'application/x-www-form-urlencoded',
                    data: $("#formFiltros").serialize(),
                    success: function (response) {
                        $('#divConsultaPagosRecibidos').html(response);
                        $('#divLoading').hide();
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            return false;
        });
    });
</script>

$（文档）.ready（函数cargar（）{
$（'.button'）。在（'click'，function cargar（）上{
//卡加和厄尔康多尔的影像
$（'divLoading'）.html（'unmomento，por-favor…'）；
$.ajax({
url:“@commercial.Models.Base.DirectorioRaiz（）PagosRecibidos/ConsultaPagosRecibidos”，
键入：“post”，
数据类型：“文本”，
contentType:'application/x-www-form-urlencoded'，
数据：$（“#formFiltros”）.serialize（），
成功：功能（响应）{
$（'#divconsultapagosrescibidos'）.html（回复）；
$（'#divload'）.hide（）；
},
错误：函数（错误）{
console.log（错误）；
}
});
返回false；
});
});

---

我不确定每次单击按钮时创建加载器是否是一个好主意。相反，我建议您在单击按钮时显示加载器，并在成功回调中隐藏它。请提醒在页面加载时隐藏加载器（最好使用css）。

您应该在成功回调中隐藏加载器。 您可以使用jQuery

hide（）

进行此操作

$('#divLoading').hide();

<script type="text/javascript">
    $(document).ready(function cargar() {
        $('.button').on('click', function cargar() {
            //Añadimos la imagen de carga en el contenedor
            $('#divLoading').html('<div class="loading"><img src="https://i.stack.imgur.com/h6viz.gif" alt="loading" /><br/>Un momento, por favor...</div>');

                $.ajax({
                    url: '@comercial.Models.Base.DirectorioRaiz()PagosRecibidos/ConsultaPagosRecibidos',
                    type: 'post',
                    dataType: 'text',
                    contentType: 'application/x-www-form-urlencoded',
                    data: $("#formFiltros").serialize(),
                    success: function (response) {
                        $('#divConsultaPagosRecibidos').html(response);
                        $('#divLoading').hide();
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            return false;
        });
    });
</script>

阅读中有关

hide（）

的更多信息

示例代码如下所示

$('#divLoading').hide();

<script type="text/javascript">
    $(document).ready(function cargar() {
        $('.button').on('click', function cargar() {
            //Añadimos la imagen de carga en el contenedor
            $('#divLoading').html('<div class="loading"><img src="https://i.stack.imgur.com/h6viz.gif" alt="loading" /><br/>Un momento, por favor...</div>');

                $.ajax({
                    url: '@comercial.Models.Base.DirectorioRaiz()PagosRecibidos/ConsultaPagosRecibidos',
                    type: 'post',
                    dataType: 'text',
                    contentType: 'application/x-www-form-urlencoded',
                    data: $("#formFiltros").serialize(),
                    success: function (response) {
                        $('#divConsultaPagosRecibidos').html(response);
                        $('#divLoading').hide();
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            return false;
        });
    });
</script>

$（文档）.ready（函数cargar（）{
$（'.button'）。在（'click'，function cargar（）上{
//卡加和厄尔康多尔的影像
$（'divLoading'）.html（'unmomento，por-favor…'）；
$.ajax({
url:“@commercial.Models.Base.DirectorioRaiz（）PagosRecibidos/ConsultaPagosRecibidos”，
键入：“post”，
数据类型：“文本”，
contentType:'application/x-www-form-urlencoded'，
数据：$（“#formFiltros”）.serialize（），
成功：功能（响应）{
$（'#divconsultapagosrescibidos'）.html（回复）；
$（'#divload'）.hide（）；
},
错误：函数（错误）{
console.log（错误）；
}
});
返回false；
});
});

---

我不确定每次单击按钮时创建加载器是否是一个好主意。相反，我建议您在单击按钮时显示加载器，并在成功回调中隐藏它。请提醒在页面加载时隐藏加载器（最好使用css）。

使用成功回调隐藏

$（“#divload”）

绘制表格前的元素

success: function (response) {
    $('#divLoading').hide();
    $('#divConsultaPagosRecibidos').html(response);
},

---

在绘制表之前，使用success回调隐藏

$（'#divload'）

元素

success: function (response) {
    $('#divLoading').hide();
    $('#divConsultaPagosRecibidos').html(response);
},

---

你把它藏在哪里了？你没有在响应处理程序中使用

#divLoading

做任何事情。你把它藏在哪里了？你没有在响应处理程序中使用

#divLoading

做任何事情。谢谢先生，正如我在帖子中所说的，我对JS的经验很低，尽管我会花时间阅读文档并在这个周末上课，谢谢对于快速回答，很好…继续..快乐编码..：）谢谢先生，正如在帖子中所说的，我在JS方面的经验非常低，尽管我会花时间阅读文档，并在本周末上课，非常感谢快速回答，很好…继续..快乐编码..：）