Laravel Blade文件中AJAX提交后JSON响应返回undefined值问题

问题原因 #

1. 控制器返回值错误：Laravel中DB::insert()执行成功只会返回布尔值true，不会返回插入的用户数据，因此前端拿到的响应结果根本没有fname等字段，自然渲染为undefined。页面刷新后数据是从后端重新全量查询渲染的，所以显示正常。
2. 前端DOM拼接语法错误：你写的"<tr><td>" + response.fname + "</tr></td>"标签闭合顺序错误，且缺少其他列的填充，也会导致渲染异常。

修复步骤 #

1. 修改控制器add方法 #

改用insertGetId获取插入记录的ID，再查询完整记录返回给前端：

public function add(Request $request)
{
    // 获取插入记录的主键ID
    $insertId = DB::table('crud_ajax')
        ->insertGetId([
            'fname' => $request->fname,
            'lname' => $request->lname,
            'email' => $request->email
        ]);
    // 查询刚插入的完整用户数据
    $newUser = DB::table('crud_ajax')->where('id', $insertId)->first();
    // 返回完整数据给前端
    return response()->json($newUser);
}

2. 修改前端AJAX成功回调的渲染逻辑 #

修正标签闭合规则，补充所有列的渲染：

success:function(response) {
    if(response) {
        let newRow = `<tr>
            <td>${response.id}</td>
            <td>${response.fname}</td>
            <td>${response.lname}</td>
            <td>${response.email}</td>
            <td>
                <a href="" class="btn btn-primary">Edit</a>
                <a href="" class="btn btn-danger">Del</a>
            </td>
        </tr>`;
        $("#tbody").append(newRow);
        $("#add").trigger("reset");
        $("#success").html("数据插入成功").slideDown();
        $("#error").slideUp();
    }
}

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