当前位置：首页 > 文章列表 > 文章 > php教程 > LaravelAJAX404解决与路由调用教程

LaravelAJAX404解决与路由调用教程

2026-01-19 12:09:57 0浏览收藏

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

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），那么路由设计本身可能就有逻辑偏差。更合理的方案是：

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

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

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

$("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');
 });
});

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

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学习网公众号，给大家分享更多文章知识！