Laravel控制器接收AJAX POST请求数据为null问题排查

问题场景 #

开发表格拖拽排序功能时，通过AJAX发起POST请求提交排序后的数据，Laravel控制器端接收时对应字段为null，尝试多种排查方案未定位问题。

原有实现代码 #

前端AJAX实现（表格拖拽排序提交逻辑） #

$(document).ready(function () {
    $('table tbody').sortable({
        update: function (event, ui) {
            $(this).children().each(function (index) {
                if ($(this).attr('data-position') != (index + 1)) {
                    $(this).attr('data-position', (index + 1)).addClass('updated');
                }
            });

            saveNewPositions();
        }
    });
});

function saveNewPositions() {
    var positions = [];
    $('.updated').each(function () {
        positions.push([$(this).attr('data-index'), $(this).attr('data-position')]);
        $(this).removeClass('updated');
    });

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

    console.log(positions);
    $.ajax({
        url: 'cursos',
        method: 'POST',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(positions),
        contentType: "application/json; charset=utf-8",
        traditional: true,
    })
}

后端Laravel控制器实现 #

public static function updateOrder(Request $request)
{
    foreach ($request->positions as $position) {
        $index = $position[0];
        $newPosition = $position[1];
        $seccion = SectionCourse::findOrFail($index);
        $seccion->order = $newPosition;
        $seccion->save();
    }

    return response('success', 200);
}

调试时通过dd()打印$request发现请求数据为空，调试截图参考：

问题根因 #

两个核心问题导致接收数据失败：

• 前端提交JSON数据时，直接序列化了纯数组结构，没有包裹后端代码预期的positions键，和后端$request->positions的取值逻辑不匹配
• 前端AJAX配置冗余，重复写了两次contentType字段，虽不直接导致报错，但属于无效配置

修复方案 #

二选一即可：

方案1：修改前端提交逻辑（推荐） #

调整AJAX提交的data结构，将纯数组包装为带positions键的对象，同时删除冗余的重复contentType配置，修正后的AJAX代码如下：

$.ajax({
    url: 'cursos',
    method: 'POST',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ positions: positions }), // 包装为带positions键的对象
    traditional: true,
    success: function (res) {
        console.log('排序更新成功', res);
    }
})

改完后后端原有逻辑不需要调整即可正常拿到数据。

方案2：修改后端取值逻辑 #

如果不想调整前端代码，就修改后端取数方式，直接获取JSON请求体的全部内容，不需要通过positions键取值，修正后的控制器代码如下：

public static function updateOrder(Request $request)
{
    // 直接获取JSON解析后的全部数组内容
    $positions = $request->json()->all();
    foreach ($positions as $position) {
        $index = $position[0];
        $newPosition = $position[1];
        $seccion = SectionCourse::findOrFail($index);
        $seccion->order = $newPosition;
        $seccion->save();
    }

    return response('success', 200);
}

如果调整后仍无法正常接收数据，额外检查两点：

• 确认routes/web.php中已经注册了POST方法的cursos路由，没有被同路径的GET路由拦截
• 确认页面头部已经正确输出了<meta name="csrf-token" content="{{ csrf_token() }}">标签，CSRF令牌可以正常读取

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