Laravel中基于选中选项加载数据至HTML表格的实现方案

要实现选中车型后无刷新加载销售数据到表格，核心是通过前端Ajax请求后端API获取对应数据，再动态渲染表格内容。以下是具体实现步骤：

1. 后端新增API接口 #

首先需要一个接口，接收选中的车型ID，返回该车型的销售详情数据。

新增API路由 #

在 routes/api.php 中添加路由，确保只有登录卖家能访问：

use App\Http\Controllers\CarShopController;

Route::middleware('auth')->get('/car-sales-details', [CarShopController::class, 'getCarSalesDetails']);

控制器实现数据查询 #

在 CarShopController 中新增方法，根据当前登录卖家和车型ID查询并计算销售数据：

public function getCarSalesDetails(Request $request)
{
    $request->validate(['car_id' => 'nullable|exists:cars,id']);
    
    if (!$request->car_id) {
        return response()->json([]);
    }

    // 关联查询当前卖家的该车型销售数据，计算所需字段
    $salesDetails = \App\Models\Sales::whereHas('carShop', function ($query) {
        $query->where('seller_id', auth()->id());
    })
    ->where('car_id', $request->car_id)
    ->selectRaw('
        cars.name as car_name,
        YEAR(sales.sale_date) as year,
        MONTH(sales.sale_date) as month,
        COUNT(sales.id) as monthly_sales,
        SUM(sales.amount) as annual_total
    ')
    ->join('cars', 'sales.car_id', '=', 'cars.id')
    ->groupBy('cars.name', 'year', 'month')
    ->first();

    return response()->json($salesDetails ?: []);
}

2. 前端实现无刷新渲染 #

在 car_details.blade.php 中，给select和表格添加标识，通过监听select的change事件触发请求并渲染表格。

修改视图HTML #

给select和表格加上ID，方便JS操作：

<select id="car-select" class="form-control">
    <option value="">请选择车型</option>
    <!-- 这里是你已有的、从数据库加载的卖家专属车型选项 -->
    @foreach($sellerCars as $car)
        <option value="{{ $car->id }}">{{ $car->name }}</option>
    @endforeach
</select>

<table id="sales-table" class="table mt-3">
    <thead>
        <tr>
            <th>车型名称</th>
            <th>年份</th>
            <th>月度销量</th>
            <th>年度销售总额</th>
        </tr>
    </thead>
    <tbody id="sales-table-body">
        <!-- 数据将通过JS动态插入 -->
    </tbody>
</table>

添加JS逻辑（jQuery示例） #

在视图底部添加脚本，监听select的change事件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#car-select').on('change', function() {
        const carId = $(this).val();
        const tbody = $('#sales-table-body');
        
        // 选中空选项时清空表格
        if (!carId) {
            tbody.empty();
            return;
        }

        // 发送Ajax请求获取数据
        $.get(`/api/car-sales-details?car_id=${carId}`, function(data) {
            tbody.empty();
            if (Object.keys(data).length > 0) {
                // 渲染表格行
                const row = `<tr>
                    <td>${data.car_name}</td>
                    <td>${data.year}</td>
                    <td>${data.monthly_sales}</td>
                    <td>${data.annual_total}</td>
                </tr>`;
                tbody.append(row);
            }
        });
    });
});
</script>

如果不想用jQuery，也可以用原生JS实现：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const carSelect = document.getElementById('car-select');
    const tbody = document.getElementById('sales-table-body');

    carSelect.addEventListener('change', async function() {
        const carId = this.value;
        tbody.innerHTML = '';

        if (!carId) return;

        try {
            const response = await fetch(`/api/car-sales-details?car_id=${carId}`, {
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            const data = await response.json();

            if (Object.keys(data).length > 0) {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${data.car_name}</td>
                    <td>${data.year}</td>
                    <td>${data.monthly_sales}</td>
                    <td>${data.annual_total}</td>
                `;
                tbody.appendChild(row);
            }
        } catch (error) {
            console.error('加载数据失败:', error);
        }
    });
});
</script>

注意事项 #

• 确保你的模型（Sales、CarShop、Car）已经正确设置了关联关系，否则关联查询会出错。
• 如果需要展示多个月度的销售数据，将控制器中的->first()改为->get()，并在前端循环渲染多行表格内容。
• 生产环境建议给API请求添加错误处理，比如请求失败时提示用户。

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