Laravel项目中日期选择器切换时添加加载GIF的实现方法

我开发了一个展示统计数据的Laravel应用，前端Blade模板里有6个统计小部件，每个对应一项统计数据，比如总订单数的小部件代码如下：

<div class="row mt-3" id="shopify_row1">
        <div class="col-md-2" id="shopify_widget1">
            <div class="jumbotron bg-dark text-white">
                <img class="img-fluid pull-left" src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
                <h6 class="text-secondary mt-2 px-4">Shopify</h6>
                <hr class="border border-white">
                <h5 class="text-white">Total Orders</h5>
                <span class="tot_o" id="tot_o">{{ $tot_o }}</span> 
            </div>
        </div>
</div>

初始状态下所有小部件显示当日统计数据。我添加了日期选择器来获取指定日期的数据：

<td>
      <input id="date" class="date form-control" type="date">
</td>

对应的jQuery代码如下，目前功能正常，但需要添加加载GIF效果，在日期切换后、数据更新完成前显示动画：

<script>
        $(document).on('change', '#date', function (e) {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'GET',
            url : '/shopify_data',
            data : {selected_date : $('#date').val()},
            success:function(data){

            $('#tot_o').empty(); 
            $('#tot_sum').empty(); 
            $('#avg_ov').empty(); 
            $('#cus').empty();
            $('#item_sum').empty();
            $('#orders').empty();
            var total_orders = data.tot_o;
            var total_sales = data.sum;
            var currency = data.crr;
            var avg_ov = data.avg_ov;
            var cus = data.cus;
            var item_sum = data.item_sum;
            var orders = data.orders;
            $('#tot_o').append(total_orders);
            $('#tot_sum').append(total_sales);
            $('#avg_ov').append(avg_ov);
            $('#cus').append(cus);
            $('#item_sum').append(item_sum);
            $('#orders').append(orders);
            //console.log(total_orders);

            },
            timeout:10000
        });

    });    
    </script>

要实现加载GIF效果，需要在AJAX请求的不同阶段处理动画的显示与隐藏，具体修改如下：

1. 准备加载动画资源 #

先准备好加载GIF图片，放到项目的静态资源目录（比如public/images/loading.gif），也可以直接使用base64格式的动画图片避免额外请求。

2. 修改jQuery代码 #

核心逻辑： #

• 在AJAX请求发起前，把所有统计数据容器替换为加载动画
• 请求成功后，替换为真实数据；请求失败/超时后，显示友好提示

修改后的完整代码： #

<script>
$(document).on('change', '#date', function (e) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // 定义所有统计容器的选择器集合
    const statContainers = ['#tot_o', '#tot_sum', '#avg_ov', '#cus', '#item_sum', '#orders'];
    // 定义加载动画的HTML片段
    const loadingHtml = '<img src="/images/loading.gif" alt="加载中" width="24" height="24">';

    // 第一步：清空所有统计容器，显示加载动画
    statContainers.forEach(container => {
        $(container).html(loadingHtml);
    });

    $.ajax({
        type: 'GET',
        url: '/shopify_data',
        data: {selected_date: $('#date').val()},
        success: function(data) {
            // 请求成功：替换为真实统计数据
            $('#tot_o').text(data.tot_o);
            $('#tot_sum').text(data.sum);
            $('#avg_ov').text(data.avg_ov);
            $('#cus').text(data.cus);
            $('#item_sum').text(data.item_sum);
            $('#orders').text(data.orders);
        },
        error: function() {
            // 请求失败：显示加载失败提示
            statContainers.forEach(container => {
                $(container).text('加载失败');
            });
        },
        timeout: 10000,
        complete: function() {
            // 可选：无论成功失败，都可以在这里执行收尾操作
        }
    });
});    
</script>

3. 优化样式（可选） #

为了让加载动画在小部件里居中显示，可以给统计容器添加CSS样式：

.tot_o, .tot_sum, .avg_ov, .cus, .item_sum, .orders {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
}

内容的提问来源于stack exchange，提问作者nikamata hukamuko