javascript - Ajax加载成功后关闭div

Question

这个问题已经有答案了:

jQuery: hide element (3 个回答)

已关闭 3 年前。

大家好，我使用一个小脚本来加载数据，在渲染之前它会显示一个正在加载的 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="/image/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>

divLoading 仍然显示在屏幕底部:(

这些是 gif 和表格渲染的 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>

Answer 1

您应该在成功回调中隐藏加载程序。您可以使用 jQuery hide() 来实现此目的。一个例子如下。

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

在 docs 中了解有关 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="/image/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>

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