使用jQuery UI实现表格拖拽排序并存入数据库时报500错误如何解决

• 核心错误：前端AJAX请求CSRF字段格式错误，提交的POST参数里CSRF token的键名丢失，你代码中错误写为": $("meta[name='csrf-token']").attr("content"),，缺少Laravel要求的_token键名，导致后端CSRF校验不通过抛出异常，返回500错误。
• 冗余配置错误：jQuery UI Sortable的cancel配置无效，你将sortable绑定在tbody#table_content元素上，该元素内部不存在thead标签，cancel: 'thead'配置不会影响功能但属于错误冗余配置。
• 潜在触发问题：如果控制器未引入DB facade、Response类，或者路由未定义对应POST规则，也会触发500错误。

1. 修正前端代码 #

首先确认页面head区域存在csrf meta标签：

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

再修正JS部分的请求参数和sortable配置：

$(document).ready(function(){
    $('#table_content').sortable({
        axis: 'y', // 限制仅纵向拖动，符合表格排序场景
        stop: () => {
            var items = $('#table_content').sortable('toArray', {attribute: 'data-index'});
            var ids = $.grep(items, (item) => item !== "");
            $.post('{{ url('/admin/categories_list/reorder') }}', {
                _token: $("meta[name='csrf-token']").attr("content"),
                ids: ids
            })
            .fail(function (response) {
                // 开发环境可打开下方注释查看具体错误信息
                // console.log(response.responseText);
                alert('排序更新请求发送失败');
                location.reload();
            });
        }
    });
});

2. 确认后端依赖引入 #

在控制器文件顶部确认引入了必要的类：

use Illuminate\Support\Facades\DB;
use Symfony\Component\HttpFoundation\Response;

3. 确认路由配置 #

在路由文件（通常是routes/web.php）中添加对应POST路由，按你实际的控制器类名和中间件规则调整：

Route::post('/admin/categories_list/reorder', [CategoryController::class, 'postCategoriesReorder'])->middleware('admin');

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