LaravelAJAX404解决与路由调用教程

从现在开始，我们要努力学习啦！今天我给大家带来《Laravel AJAX 404 错误解决与路由调用教程》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

本文详解 Laravel 中 AJAX 请求返回 404 的常见原因，重点指出 URL 构建错误（混淆 `url()` 与 `route()`），并提供基于命名路由的规范 AJAX 调用方案。

在 Laravel 中使用 AJAX 时出现 404 错误，绝大多数情况源于前端请求 URL 与后端定义的路由不匹配。你当前的代码中存在一个关键矛盾：路由被命名为 'getFreeDay'，但前端却用 {{ url('rezerwacja') }} 拼接路径，而该路径并未包含必需的 {reservation} 占位符参数，导致 Laravel 路由器无法匹配。

首先，你的路由定义为：

Route::post('/rezerwacja/{reservation}', [ReservationController::class, 'getFreeDay'])->name('getFreeDay');

这是一个 POST 方法、带动态参数 {reservation} 的命名路由。但你的 AJAX 配置中：

const getFreeDay = "{{ url('rezerwacja')}}/"; // ❌ 错误：url() 不支持参数绑定，且缺少 {reservation}
url: getFreeDay + $(this).val(), // 实际发出如 `/rezerwacja/123` —— 但 Laravel 期望的是 `/rezerwacja/{reservation}`，而此处 `123` 被当作 `reservation` 值？未必合法！

问题在于：url('rezerwacja') 仅生成 /rezerwacja（无尾部斜杠），拼接后变成 /rezerwacja/123，但路由要求的是 /rezerwacja/{reservation} —— 看似结构一致，实际缺失关键上下文：{reservation} 必须对应一个有效的 Reservation 模型实例 ID（Laravel 隐式模型绑定依赖此）。若传入的 $(this).val() 并非数据库中存在的 Reservation ID（而是 Service ID），则路由根本不会命中，直接 404。

✅ 正确做法是：统一使用 route() 辅助函数生成完整、带参数的 URL，并确保参数语义正确。

✅ 正确的 AJAX 实现（推荐）

假设你真正想传递的是 service_id（来自 select 的 value），而非 reservation（因为下拉项是 $services），那么路由设计本身可能就有逻辑偏差。更合理的方案是：

1. 修正路由（不依赖 Reservation 模型绑定）：

   // routes/web.php
   Route::post('/api/free-days', [ReservationController::class, 'getFreeDay'])->name('api.free-days');

2. 前端使用 route() 生成 URL，并显式传参：

   <!-- 确保页面包含 CSRF meta 标签 -->
   <meta name="csrf-token" content="{{ csrf_token() }}">

   $("select#select-service").change(function () {
    const serviceId = $(this).val();
   
    $.ajax({
        method: 'POST',
        url: '{{ route("api.free-days") }}', // ✅ 正确：由 Laravel 解析命名路由
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            service_id: serviceId // 显式传参，语义清晰
        },
        dataType: 'json'
    })
    .done(function (response) {
        console.log('Success:', response);
        // ✅ 处理返回数据，避免盲目 reload
        // window.location.reload();
    })
    .fail(function (xhr) {
        console.error('Error:', xhr.responseJSON?.message || 'Request failed');
    });
   });

3. 控制器适配（移除隐式绑定，接收普通请求）：

   public function getFreeDay(Request $request): JsonResponse
   {
    $serviceId = $request->input('service_id');
   
    try {
        // 此处根据 $serviceId 查询空闲日期等业务逻辑
        return response()->json([
            'status' => 'success',
            'data' => ['free_dates' => []] // 示例数据
        ]);
    } catch (\Exception $e) {
        return response()->json([
            'status' => 'error',
            'message' => 'Wystąpił błąd'
        ])->setStatusCode(500);
    }
   }

⚠️ 关键注意事项

• 不要混用 url() 和 route()：url() 用于绝对路径拼接（如 url('assets/js/app.js')），route() 专用于命名路由（自动处理参数、HTTPS、子目录等）。
• 方法必须一致：路由定义为 POST，AJAX method 也必须是 'POST'（你原代码误写为 'GET'）。
• CSRF 保护必开：Laravel 默认启用，AJAX POST/PUT/DELETE 必须携带 X-CSRF-TOKEN。
• 避免 window.location.reload() 在 .done() 中无条件执行：这会中断用户操作，应改为动态更新 DOM（如填充日历控件）。

遵循以上方案，即可彻底解决 404 问题，并构建可维护、符合 Laravel 最佳实践的 AJAX 交互。

好了，本文到此结束，带大家了解了《LaravelAJAX404解决与路由调用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！