Laravel8合并多分类对应供应商查询结果返回JSON实现AJAX联动

问题根源 #

• 原有控制器循环中每次都覆盖$fournisseurs变量，仅保留最后一次分类查询的结果
• 不合理的implode操作将集合转为字符串，嵌套循环逻辑完全混乱
• 循环查询数据库性能低下，还会出现同一个供应商属于多个分类时重复返回的问题

修复后的控制器代码 #

public function get_fournisseurs(Request $request){
    try {
        if($request->ajax()) {
            $selectedCats = $request->get('selectednumbers');

            if(empty($selectedCats)) {
                return response()->json(['error' => '请求参数为空'], 400);
            }
            
            // 一次性查询所有选中分类关联的供应商，去重避免重复
            $fournisseurs = FourCats::join('fournisseurs','four_cat.four', '=', 'fournisseurs.id')
                ->whereIn('four_cat.cat', $selectedCats)
                ->select('fournisseurs.id','fournisseurs.nomSociete','fournisseurs.tel')
                ->distinct()
                ->get();
            
            // 直接返回json格式，无需手动编码
            return response()->json(['data' => $fournisseurs]);
        }
        return back();
    } catch (\Throwable $th) {
        throw $th;
    }
}

对应调整的AJAX代码 #

因为后端已经直接返回结构化的数组，前端不需要再做JSON.parse解析：

$('#first-choice').change(function(){
    if( $('#first-choice :selected').length > 0){
        var selectednumbers = [];
        $('#first-choice :selected').each(function(i, selected) {
            selectednumbers[i] = $(selected).val();
        });
        $.ajax({
            url: '{{ url('get_fournisseurs') }}',
            method:'GET',
            data: {selectednumbers: selectednumbers },
            dataType: 'json',
            success: function(dataResult){
                var resultData = dataResult.data;
                $('#second-choice').empty();
                // 移除JSON.parse操作，直接遍历数组
                $.each(resultData, function(i,row){
                    $('#second-choice').append(new Option( row.id+'-'+row.nomSociete, row.id));
                })
            }
        });
    }
});

优化说明 #

• 用whereIn批量查询替代循环单次查询，减少数据库IO次数提升性能
• 新增distinct()方法对供应商结果去重，避免同一个供应商关联多个分类时重复出现在下拉选项中
• 采用Laravel内置的response()->json()方法返回响应，自动处理编码格式，减少前后端手动序列化/反序列化的出错概率
• 空参数时返回JSON格式的错误响应，适配AJAX请求的处理逻辑，避免返回HTML页面的异常情况

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