Laravel中如何在.blade文件外通过AJAX调用路由？

核心问题 #

独立JS文件无法直接解析Laravel的Blade语法{{ route(...) }}，所以需要先把路由信息传递到前端全局环境，再在JS文件中调用。

方法1：全局变量注入路由信息 #

在blade模板的</body>标签前，添加一段script标签，把需要用到的路由定义为全局对象：

<script>
    window.laravelRoutes = {
        userStore: "{{ route('users.store') }}",
        userShow: "{{ route('users.show', ':id') }}",
        taskDelete: "{{ route('tasks.destroy', ':id') }}",
        // 把你需要的5个AJAX对应的路由都列在这里
    };
</script>
<!-- 然后引入你的独立JS文件 -->
<script src="{{ asset('js/ajax-functions.js') }}"></script>

在独立的ajax-functions.js文件中，直接调用全局变量里的路由：

// 示例：创建用户的AJAX函数
function createUser(formData) {
    return $.ajax({
        url: window.laravelRoutes.userStore,
        method: 'POST',
        data: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        success: function(response) {
            // 处理成功逻辑
        },
        error: function(xhr) {
            // 处理错误逻辑
        }
    });
}

// 带参数的路由示例：获取用户详情
function getUser(userId) {
    // 替换路由中的占位符:id
    const url = window.laravelRoutes.userShow.replace(':id', userId);
    return $.ajax({
        url: url,
        method: 'GET',
        success: function(response) {
            // 处理成功逻辑
        }
    });
}

方法2：通过HTML元素的data属性传递路由 #

如果AJAX操作和特定DOM元素绑定（比如按钮点击触发），可以直接在元素上添加data-*属性存储路由：

<button class="delete-task-btn" data-route="{{ route('tasks.destroy', $task->id) }}" data-id="{{ $task->id }}">
    删除任务
</button>

然后在独立JS文件中，通过元素的dataset属性获取路由：

// 批量绑定删除按钮的点击事件
document.querySelectorAll('.delete-task-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const deleteRoute = this.dataset.route;
        const taskId = this.dataset.id;

        if (confirm(`确定删除ID为${taskId}的任务吗？`)) {
            $.ajax({
                url: deleteRoute,
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                success: function() {
                    // 删除成功后更新页面，比如移除对应的DOM元素
                    btn.closest('.task-item').remove();
                }
            });
        }
    });
});

注意事项 #

• 确保全局变量的script标签在独立JS文件之前加载，否则JS文件会找不到全局变量。
• 别忘了在AJAX请求中携带CSRF令牌，Laravel默认会在头部生成<meta name="csrf-token">标签，直接读取即可。
• 带参数的路由要提前在全局变量中用占位符（比如:id），之后在JS中替换成实际值。

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