Datatables+Laravel编辑功能异常：Modal无法加载数据排查

问题概述 #

点击Datatables编辑按钮触发AJAX请求后，console.log(result)为空，var message显示undefined，导致编辑Modal无法加载对应记录数据。

修复步骤 #

1. 修正AJAX请求URL（匹配正确路由） #

当前前端请求的URL对应资源路由的show方法，而非edit方法。嵌套资源路由的edit路径格式为/admin/user/{user}/messages/{message}/edit，需调整前端URL生成方式：

替换JS中的URL配置为：

url: "{{ route('admin.user.messages.edit', ['user' => auth()->user()->id, 'message' => ':id']) }}".replace(':id', id),

或者保留拼接方式，添加/edit后缀：

url: editRoute + "/" + id + "/edit",

2. 修正控制器edit方法的参数获取 #

Laravel嵌套资源路由的edit方法会传递user和message两个路由参数，无需通过$request->id查询。修改控制器方法：

方式一：使用路由模型绑定（推荐）

public function edit(User $user, Message $message)
{
    return response()->json([
        'message' => "Data Found",
        "code"    => 200,
        "data"    => $message
    ]);
}

方式二：手动获取路由参数查询

public function edit(Request $request, $user, $message)
{
    $result = Message::where('id', $message)->first();

    if ($result) {
        return response()->json([
            'message' => "Data Found",
            "code"    => 200,
            "data"    => $result
        ]);
    } else {
        return response()->json([
            'message' => "Record Not Found",
            "code"    => 404
        ]);
    }
}

3. 启用AJAX的JSON数据类型解析 #

前端AJAX未指定dataType: 'json'，导致返回的JSON无法正确解析为对象。取消注释该配置：

dataType: 'json',

4. 修正Modal表单的类选择器 #

原Modal中部分表单元素缺少对应类名，导致无法赋值。给表单元素添加类，并新增隐藏的ID输入框：

<div class="form-group">
    <label for="text">Testo</label>
    <input type="text-area" class="form-control text" id="text" name="text">
</div>
<div class="form-group">
    <label for="url">URL</label>
    <input type="text" class="form-control url" id="url" name="url">
</div>
<div class="form-group">
    <label for="note">Note</label>
    <input type="text" class="form-control note" id="note" name="note">
</div>
<div class="form-group">
    <label for="tipes">Tipo</label>
    <select name="tipes" id="tipes" class="tipes">
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
</div>
<div class="form-group">
    <label for="start_time">Inizio</label>
    <input type="date" class="form-control start_time" id="start_time" name="start_time">
</div>
<div class="form-group">
    <label for="end_time">Fine</label>
    <input type="date" class="form-control end_time" id="end_time" name="end_time">
</div>
<div class="form-group">
    <label for="active">Attivo</label>
    <select name="active" id="active" class="active">
        <option value="1">Si</option>
        <option value="0">No</option>
    </select>
</div>
<!-- 新增隐藏输入框存储ID -->
<input type="hidden" class="id" name="id">

5. 确保CSRF令牌配置正确 #

确认token()函数正确设置AJAX请求的CSRF令牌：

function token() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
}

同时页面头部需包含CSRF元标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

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