如何从Blade控制器传递双参数过滤Devices下拉选择框？

问题说明 #

我有sites、areas、devices三个下拉选择字段，需要根据选中的站点和区域过滤设备列表，仅显示对应站点和区域的设备。目前仅实现了通过区域过滤的功能，但在JS中传递site_id参数时出现500错误。

修正步骤 #

1. 同步路由与控制器参数逻辑 #

原路由定义了两个可选参数，但控制器仅接收区域参数，这是导致500错误的核心原因。需要调整控制器参数接收逻辑，并添加站点过滤条件：

修正后的路由代码：

Route::get('devices/workarea/{work_area_id?}/{site_id?}','DevicesController@getDevicesByArea')->name('devices.byArea');

修正后的控制器代码：

public function getDevicesByArea($work_area_id = null, $site_id = null) {
    $devices = [];
    
    if($work_area_id) {
        $query = Device::selectRaw('id, CONCAT(device_alias) as work_device')
                       ->where('belongs_to_work_area_id', $work_area_id);
        
        // 若站点ID存在，追加站点过滤条件（请根据实际表字段调整belongs_to_site_id）
        if($site_id) {
            $query->where('belongs_to_site_id', $site_id);
        }
        
        $devices = $query->get()->pluck('work_device', 'id');
    }
    
    return response()->json($devices);
}

注意：请将belongs_to_site_id替换为你的Device表中实际关联站点的字段名。

2. 修正前端URL拼接与请求逻辑 #

原JS未将site_id拼接到请求URL中，需补充该逻辑，同时处理site_id为空的场景：

修正后的JQuery代码：

$(document).ready(function () {
    $("#area_id").on('change', function(){
        var area_id = this.value;
        var site_id = $('#site_id').val();
        
        // 构建请求URL：存在site_id则追加参数
        var deviceUrl = "{{ route('admin.devices.byArea') }}";
        if(area_id) {
            deviceUrl += "/" + area_id;
            site_id && (deviceUrl += "/" + site_id);
        }
        
        $.ajax({
            url: deviceUrl,
            success: function(result){
                var html = '<option value="">请选择设备</option>';
                for(var key in result) {
                    html += `<option value="${key}">${result[key]}</option>`;
                }
                $("#device_id").html(html);
                $('#device_id').val('');
            },
            error: function(xhr){
                console.error('请求错误：', xhr.responseText);
            }
        });
    });
    
    // 可选：监听站点切换，同步更新设备列表
    $("#site_id").on('change', function(){
        $("#area_id").trigger('change');
    });
});

额外优化提示 #

• 用response()->json()替代json_encode()，Laravel会自动处理响应头与JSON格式，更规范。
• 添加错误回调函数，便于调试请求失败原因。
• 监听站点选择框变化，确保站点切换时设备列表同步更新。

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