Laravel Ajax联动下拉选中站点后控制器列表不显示如何解决

核心错误点梳理 #

• 下拉框元素缺少ID属性，jQuery无法定位
  站点选择框仅定义了name="sites_id"，未添加id="sites_id"，JS中的$('#sites_id')选择器匹配不到DOM元素，change事件无法触发。
  控制器选择框仅定义了name="dvc_name"，未添加id="dvc_name"，后续清空选项、追加选项的操作全部无法生效。

• AJAX请求配置错误

  1. 变量引用异常：代码已将选中的站点值存入变量id，但拼接请求地址时直接使用了未定义的全局变量sites_id，会触发控制台ReferenceError中断请求。
  2. 路径不匹配：路由注册的地址为query-controller/getcontrollers/{sites_id}，但代码中写的请求路径为getController/xxx，路径完全错位，请求会返回404。

• 控制器方法名与路由绑定不匹配
  路由定义中绑定的方法是QueryDataController@getControllers，但实际控制器中编写的方法名为getController（缺少末尾的s），即使路径正确，也会因为方法不存在抛出404错误。

• 返回值取值逻辑错误
  控制器查询设备列表时，仅筛选了id和dvc_name两个字段，并未查询sites_id字段，但JS代码将不存在的sites_id作为下拉选项的value，最终生成的选项值为undefined，无法正常提交表单。

• 模型查询的pluck方法参数使用错误
  Laravel的pluck()方法仅支持两个入参（返回值字段名、键名字段名），不存在第三个参数，传入Sites::pluck('sites_id' ,'site_code' , 'site_name')的写法中，第三个参数site_name不会生效，无法实现站点编码+名称的显示效果。

修复后可直接运行的代码 #

控制器代码 #

public function index()
{
    // 调整pluck逻辑：以站点ID为键，拼接站点编码+名称为显示文本
    $sites = Sites::pluck(DB::raw("CONCAT(site_code, ' - ', site_name)"), 'sites_id');
    return view('query.index', compact('sites'));
}

// 方法名与路由注册保持一致
public function getControllers($sites_id){
    $controllerData['data'] = device_profile::orderBy("dvc_name","asc")
        ->select('id','dvc_name')
        ->where('sites',$sites_id)
        ->get();
    return response()->json($controllerData);
}

视图代码 #

<!-- 站点选择框补全id属性 -->
<div class="form-group">
    <label class="control-label mb-10 text-left">Site:</label>
    <select name="sites_id" id="sites_id" class="form-control" required="">
        @foreach ($sites as $sites_id => $site_display) 
            <option value="{{$sites_id}}" 
                {{ old('sites_id') == $sites_id ? 'selected' : '' }}>
                {{ $site_display }}
            </option>
        @endforeach
    </select>

    @error('sites_id')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror       
</div>

<!-- 控制器选择框补全id属性 -->
<div class="form-group">
    <label for="dvc_name">Select Controller:</label>
    <select name="dvc_name" id="dvc_name" class="form-control" required="">
        <option value="">--Controller List--</option>
    </select>
</div>

<script type='text/javascript'>
$(document).ready(function(){
    $('#sites_id').change(function(){
        const selectedSiteId = $(this).val();
        // 清空原有非默认选项
        $('#dvc_name').find('option:not(:first)').remove();

        // 使用路由名称生成请求地址，避免硬编码路径出错
        $.ajax({
            url: "{{ route('profile.getControllers') }}/" + selectedSiteId,
            type: 'get',
            dataType: 'json',
            success: function(response){
                if(response['data']?.length){
                    response['data'].forEach(item => {
                        // 以设备ID为选项值，设备名称为显示文本
                        const option = `<option value="${item.id}">${item.dvc_name}</option>`;
                        $('#dvc_name').append(option);
                    })
                }
            },
            error: function(xhr){
                console.log("AJAX请求异常：", xhr.status, xhr.responseText);
            }
        });
    });
});
</script>

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