Laravel 10中Ajax DataTable请求404错误排查求助

1. 修复Ajax请求地址错误 #

你JS代码里用{{ url('sale.list') }}生成了错误的请求地址（/sale.list），但路由实际路径是/list，且路由名称为sale.list，应该用route()函数生成正确的URL：

ajax: "{{ route('sale.list') }}",

url()函数会把sale.list当作路径字符串，而route()会根据路由名称匹配到正确的/list路径，这是导致404的核心原因。

2. 补充DataTables的Action列配置 #

表格里包含Action列，但JS的columns配置只定义了id列，必须添加Action列的配置才能正常显示：

columns: [
    { data: 'id', name: 'id' },
    { data: 'action', name: 'action', orderable: false, searchable: false }
]

设置orderable: false和searchable: false是因为Action列是动态生成的，不需要参与排序和搜索。

3. 修正Controller中的拼写问题 #

Controller里的orderby需改为驼峰式的orderBy，否则会影响数据排序逻辑：

$sales = Sale::orderBy('id', 'asc')->select('*')->get();

4. 确认路由与控制器映射（针对Laravel版本差异） #

如果是Laravel 8及以上版本，路由需要补充完整的控制器命名空间：

Route::get('list', [App\Http\Controllers\SaleController::class, 'getSales'])->name('sale.list');

Laravel 7及以下版本的路由代码无需修改，保持原配置即可。

最终修正后的完整代码片段 #

JS代码 #

<script type="text/javascript">
    $(function () {
        var table = $('.table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('sale.list') }}",
            columns: [
                { data: 'id', name: 'id' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });
    });
</script>

Controller代码 #

public function getSales(Request $request) {
    if ($request->ajax()) {
        $sales = Sale::orderBy('id', 'asc')->select('*')->get();

        return Datatables::of($sales)
            ->addIndexColumn()
            ->addColumn('action', function($row) {
                $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                return $actionBtn;
            })
            ->rawColumns(['action'])
            ->make(true);
    }
}

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