Laravel项目集成Yajra DataTables报Ajax错误如何排查？

报错提示 #

DataTables warning: table id=DataTables_Table_0 - Ajax error.

相关代码 #

控制器代码 #

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Transaction;
use DataTables;
use Illuminate\Support\Facades\DB;

class TestTableController extends Controller
{
    public function index()
    {
        return view('testtable');
    }

    public function getTestTable(Request $request)
    {
        if ($request->ajax()) {
            $data = DB::table('transactions')->get();
            return Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">编辑</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">删除</a>';
                    return $actionBtn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }
    }
}

路由代码 #

Route::get('testtable', [TestTableController::class, 'index']);
Route::get('testtable/list', [TestTableController::class, 'getTestTable'])->name('testtable.list');

视图/Blade代码 #

<body>
<div class="container mt-5">
    <h2 class="mb-4">Laravel 7|8 Yajra Datatables 示例</h2>
    <table class="table table-bordered yajra-datatable">
        <thead>
            <tr>
                <th>ID</th>
                <th>金额</th>
                <th>手续费</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

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

已确认排查信息 #

• 直接执行DB::table('transactions')->get()可正常返回数据
• 完全相同代码在全新Laravel环境运行正常，仅现有项目报错
• 错误截图：
• 直接输出查询结果截图：

排查方向与解决方案 #

按出现概率从高到低排序：

1. 权限/认证中间件拦截
   现有项目默认给路由组加了登录认证、权限校验类中间件，testtable/list路由被拦截后返回了重定向HTML而非要求的JSON格式，导致DataTables解析失败。

   • 排查方法：确认路由是否放在了带有auth等校验的中间件组下，临时将该路由移到所有中间件外测试是否正常。

2. 全局中间件修改响应内容
   项目存在全局中间件修改了响应的Content-Type，或者在响应输出前追加了调试信息、日志打印、冗余字符（换行、空格、HTML片段），破坏了DataTables要求的纯JSON格式。

   • 排查方法：直接在浏览器访问你的域名/testtable/list，查看返回内容是否为纯JSON，有没有额外冗余内容；检查app/Http/Kernel.php注册的全局中间件，是否有自定义中间件修改了响应内容。

3. $request->ajax()判断失效
   现有项目修改了请求判定逻辑，导致Ajax请求识别失败，控制器压根没有走到DataTables返回的分支。

   • 验证方法：暂时去掉if ($request->ajax())判断，直接返回DataTables响应，看是否正常。

4. Yajra DataTables版本不兼容
   现有项目的Laravel版本和安装的Yajra DataTables版本不匹配，全新项目安装的是匹配版本所以运行正常。

   • 排查方法：对照版本对应关系，卸载当前版本重装适配当前Laravel版本的Yajra DataTables即可。

5. 全局异常捕获干扰
   项目开启了全局错误显示，或者有自定义异常处理器，处理过程中抛出的警告、notice插入到了JSON响应中，导致格式错误。

   • 排查方法：查看storage/logs下的最新日志，确认对应请求有没有报错记录。

内容的提问来源于stack exchange，提问作者Izzat Z.