Laravel控制器接收Ajax POST参数为null触发500错误排查

报错核心原因是后端接收到的positions参数为null，由前端JS的3处错误导致，逐一修复即可：

• 类选择器写法错误：$('updated') 缺少类选择器前缀.，无法选中添加了updated类的表格行
• 变量名拼写错误：定义的数组名为positions，写入数据时错写为position，触发JS未定义变量报错，数组始终为空
• 路径与CSRF设置冗余：AJAX请求的URL用相对路径容易匹配错误，同时重复设置CSRF令牌，若JS写在外部文件中Blade模板语法不会被解析，导致令牌失效

修复后完整代码 #

1. 页面头部依赖 #

先确保页面head区域提前引入了jQuery、jQuery UI（sortable拖拽功能依赖这两个库），同时添加CSRF meta标签：

<!-- CSRF标签 -->
<meta name="csrf-token" content="{{ csrf_token() }}">

表格行必须设置两个自定义属性：data-index值为对应记录的数据库主键ID，data-position值为当前排序值，否则前端取不到对应参数

2. 前端JS逻辑 #

$(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() {
    let positions = [];
    // 修复选择器前缀
    $('.updated').each(function () {
        // 修复变量名拼写
        positions.push([$(this).attr('data-index'), $(this).attr('data-position')]);
        $(this).removeClass('updated');
    });

    // 全局设置CSRF请求头
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        // 修复为绝对路径，避免路由匹配错误
        url: '/cursos',
        method: 'POST',
        dataType: 'json',
        data: {
            updated: 1,
            positions: positions
        },
        success: function (res) {
            console.log('排序更新成功', res);
        },
        error: function (xhr) {
            console.log('请求错误', xhr.responseText);
        }
    })
}

3. 路由定义（web.php） #

use App\Http\Controllers\SectionCourseController;
use Illuminate\Http\Request;

Route::post('/cursos', function (Request $request){
    return SectionCourseController::updateOrder($request);
})->name('course.order.update');

4. 控制器方法优化 #

增加参数校验，避免空数据直接进入循环报错：

public static function updateOrder(Request $request)
{
    $validated = $request->validate([
        'positions' => 'required|array',
        'positions.*' => 'required|array'
    ]);

    foreach ($validated['positions'] as $position) {
        $index = $position[0];
        $newPosition = $position[1];
        $seccion = SectionCourse::findOrFail($index);
        $seccion->order = $newPosition;
        $seccion->save();
    }

    return response()->json(['message' => '排序更新成功'], 200);
}

额外排查点 #

• 确认数据库section_courses表存在order整数类型字段
• 若拖拽时容易横向偏移，可给sortable方法添加axis: 'y'配置，限制仅纵向拖拽
• 打开浏览器控制台的Network面板，可直接查看AJAX请求的提交参数和返回错误，方便快速定位问题

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