Laravel Blade中JS函数内路由参数传递失败的解决方法

问题原因 #

Blade模板是服务器端预渲染的，页面加载时{!! route() !!}会被服务器优先解析。你直接把JS变量userId嵌入Blade的route()函数中，服务器无法识别客户端JS变量，会将'+userId+'当作字面量字符串传入路由生成逻辑，导致最终URL里的ID参数变成+userId+而非实际用户ID。

解决方案 #

方法一：占位符替换法 #

先让服务器生成带占位符的路由URL，再用JS将占位符替换为实际的userId：

function submitForm(userId) {
    // 服务器端生成带{id}占位符的路由
    var ajaxUrl = '{!! route("user-role-update", ["id" => "{id}"]) !!}'.replace('{id}', userId);
    $.ajax({
        type: 'PUT',
        url: ajaxUrl,
        data: {
            _token: "{!! csrf_token() !!}",
            'newRoles': userRoleTableData
        },
        // 补充AJAX回调逻辑（如success/error）
    });
}

方法二：基础URL拼接法 #

先获取路由的基础路径，再手动拼接userId：

function submitForm(userId) {
    // 生成带临时ID的路由，移除临时ID得到基础路径
    var baseUrl = '{!! route("user-role-update", ["id" => 0]) !!}'.replace('/0', '');
    var ajaxUrl = baseUrl + '/' + userId;
    
    // 也可直接用url()函数生成基础路径
    // var ajaxUrl = '{!! url("user-role-update") !!}/' + userId;
    
    $.ajax({
        type: 'PUT',
        url: ajaxUrl,
        data: {
            _token: "{!! csrf_token() !!}",
            'newRoles': userRoleTableData
        },
        // 补充AJAX回调逻辑
    });
}

额外注意 #

确保路由定义的参数名称与route()函数传入的键名一致，例如：

Route::put('/user-role-update/{id}', [YourController::class, 'updateUserRole'])->name('user-role-update');

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