如何在Laravel中实现无需提交按钮的日期下拉筛选功能

实现方案说明 #

你现有的后端逻辑已经做了AJAX请求判断，最适配需求的实现方式就是用AJAX拉取数据，不需要页面刷新，也不需要提交按钮，完全符合你的要求。也可以选择Livewire无JS方案，下文会分别说明。

第一步：修复现有后端问题 #

你当前的后端代码存在两处需要调整的地方：

• 筛选值为3（最近30天）的分支，漏了返回JSON的逻辑，需要补上echo json_encode($a_month);
• 所有查询不需要先调用->get()再执行count、sum操作，直接在查询构造器上调用对应方法即可，降低内存开销，示例：

// 优化前
PurchaseOrder::whereDate('date_of_purchase', '=', Carbon::now())->get()->count()
// 优化后
PurchaseOrder::whereDate('date_of_purchase', '=', Carbon::now())->count()

第二步：配置路由 #

在routes/web.php中添加对应接口路由，示例：

// 替换为你实际的控制器类名和方法名
Route::get('/dashboard/filter-statistics', [DashboardController::class, 'filterStatistics'])->name('dashboard.filter_statistics');

第三步：Blade 页面配置 #

3.1 编写下拉框和数据展示DOM #

<!-- 时间筛选下拉框 -->
<select id="date_filter" class="form-control">
    <option value="1" selected>今日</option>
    <option value="2">最近7天</option>
    <option value="3">最近30天</option>
</select>

<!-- 统计数据展示区域，给每个数据节点加唯一ID方便更新 -->
<div class="stats-container">
    <div class="stat-item">
        <span>采购单数量</span>
        <strong id="purchase_order_count">{{ $default_purchase_count }}</strong>
    </div>
    <div class="stat-item">
        <span>销售单数量</span>
        <strong id="sales_order_count">{{ $default_sales_count }}</strong>
    </div>
    <div class="stat-item">
        <span>总营收</span>
        <strong id="total_revenue">¥{{ $default_revenue }}</strong>
    </div>
    <div class="stat-item">
        <span>销售总成本</span>
        <strong id="total_cost">¥{{ $default_cost }}</strong>
    </div>
</div>

注：页面首次加载的默认数据可以在控制器渲染视图时直接传入，避免首次加载空白

3.2 添加AJAX交互逻辑 #

这里以项目常用的jQuery为例，原生JS实现逻辑一致：

<script>
$(document).ready(function() {
    // 监听下拉框值变化，自动触发数据拉取，无需提交按钮
    $('#date_filter').on('change', function() {
        let filterValue = $(this).val();
        fetchFilterData(filterValue);
    });
});

function fetchFilterData(filterVal) {
    $.ajax({
        url: "{{ route('dashboard.filter_statistics') }}",
        method: 'GET',
        data: {
            filter: filterVal
        },
        dataType: 'json',
        success: function(response) {
            // 按你后端返回的数组顺序更新对应DOM
            $('#purchase_order_count').text(response[0]);
            $('#sales_order_count').text(response[1]);
            $('#total_revenue').text('¥' + (response[2] || 0).toFixed(2));
            $('#total_cost').text('¥' + (response[3] || 0).toFixed(2));
        },
        error: function() {
            alert('数据加载失败，请刷新页面重试');
        }
    });
}
</script>

其他可选实现方案 #

如果不想手动编写AJAX代码，可以使用Laravel官方的Livewire组件实现：

• 将筛选逻辑和视图封装到Livewire组件中
• 给下拉框绑定wire:model="filter"属性
• 监听filter属性变化执行查询，Livewire会自动更新页面DOM，不需要写任何JS代码

内容的提问来源于stack exchange，提问作者Yoga Arliza