Laravel使用Ajax获取数据时报projets_casting变量未定义如何解决

问题原因 #

• Blade模板为服务端预编译渲染，页面首次加载时就会解析所有@语法标签，此时还未触发下拉框切换事件、未发起AJAX请求，控制器未向视图传递$projets_casting变量，直接触发变量未定义错误。
• 控制器返回的是JSON数据，并未重新渲染视图，AJAX请求返回的数据只能由前端JS接收处理，无法直接被Blade语法读取。
• 控制器参数获取逻辑错误：项目ID拼接在请求URL路径中，通过request('numero_projet')无法获取到对应ID值，查询结果会为空。
• AJAX代码未添加success回调函数，拿到接口返回的JSON数据后未做后续渲染处理，数据无法展示到页面。

修复方案 #

步骤1：调整控制器与路由 #

首先确认routes/web.php中存在对应路由：

// 替换为你实际的控制器类名
Route::get('getProjet/{id_projet}', [ProjectController::class, 'getProjet']);

修改控制器逻辑，直接读取路径中的ID参数：

public function getProjet($id_projet)
{
    if(request()->ajax())
    {
        $projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
        return response()->json(['projets_casting' => $projets_casting]);
    }
    abort(404);
}

步骤2：修改Blade模态框代码 #

删除原模板中的@foreach语法，添加空容器用于JS动态插入内容：

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Select from Library</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body scroll pt-0 pb-0 mt-4 mb-4">
            <div class="accordion" id="accordion">
                <div class="mb-2">
                    <button class="btn btn-link p-0 folder-button-collapse" data-toggle="collapse"
                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <span class="icon-container">
                            <i class="simple-icon-arrow-down"></i>
                        </span>
                        <span class="folder-name">Castings</span>
                    </button>
                    <div id="collapseOne" class="collapse show" data-parent="#accordion">
                        <div class="list disable-text-selection">
                            <!-- 新增id为casting_list的空容器，用于动态插入内容 -->
                            <div class="row" id="casting_list">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Annuler</button>
            <button type="button" class="btn btn-primary sfl-submit">Selectionner</button>
        </div>
    </div>
</div>

步骤3：修改AJAX代码添加回调处理 #

在AJAX中添加success回调，拿到数据后动态生成DOM插入到容器中：

$(document).ready(function(){
    $('#numero_projet').change(function(){
        var id_projet = $(this).find("option:selected").data("id");
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
        });
        
        $.ajax({
            url:"getProjet/"+id_projet,
            type:"GET",
            success: function(res) {
                // 清空之前的历史内容
                $('#casting_list').empty();
                // 遍历返回的casting数据生成DOM
                res.projets_casting.forEach(function(casting) {
                    let itemHtml = `
                    <div class="col-6 mb-1 sfl-item-container casting"
                        data-preview-path="img/products/chocolate-cake-thumb.jpg"
                        data-path="img/products/chocolate-cake-thumb.jpg"
                        data-label="chocolate-cake-thumb.jpg">
                        <div class="card d-flex mb-2 p-0 media-thumb-container">
                            <div class="d-flex align-self-stretch">
                                <img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
                                    class="list-media-thumbnail responsive border-0" />
                            </div>
                            <div class="d-flex flex-grow-1 min-width-zero">
                                <div
                                    class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
                                    <div class="w-100">
                                        <p class="truncate mb-0">${casting.id_casting}</p>
                                    </div>
                                </div>
                                <div
                                    class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
                                    <label class="custom-control custom-checkbox mb-0">
                                        <input type="checkbox" class="custom-control-input">
                                        <span class="custom-control-label"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    `;
                    $('#casting_list').append(itemHtml);
                });
                // 此处可添加模态框弹出代码，例如 $('#modal_id').modal('show');
            }
        })
    })
})

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