如何在用户会话页面加载时通过PHP+JSON加载jQuery UI Sortable自定义侧边菜单排序

一、PHP 后端：从数据库获取并返回排序数据 #

首先需要编写一个 PHP 接口，负责从数据库中读取当前用户的自定义菜单排序，并以 JSON 格式返回给前端。这里要重点做好用户身份验证，确保返回的是当前登录用户的专属排序数据。

代码示例 #

<?php
// 启动会话以获取当前登录用户（假设使用会话管理身份）
session_start();

// 检查用户是否已登录
if (!isset($_SESSION['user_id'])) {
    http_response_code(401);
    echo json_encode(['error' => '未授权访问']);
    exit;
}

// 数据库连接配置（替换为你的实际信息）
$dbHost = 'localhost';
$dbName = 'your_database';
$dbUser = 'your_username';
$dbPass = 'your_password';

try {
    // 初始化PDO连接
    $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 查询当前用户的自定义菜单排序
    $stmt = $pdo->prepare("SELECT custom_menu_order FROM users WHERE id = :user_id");
    $stmt->bindParam(':user_id', $_SESSION['user_id'], PDO::PARAM_INT);
    $stmt->execute();
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    $menuOrder = [];
    if ($user && !empty($user['custom_menu_order'])) {
        // 将数据库中存储的JSON字符串解码为PHP数组
        $menuOrder = json_decode($user['custom_menu_order'], true);
    } else {
        // 如果用户没有保存过自定义排序，返回默认排序（替换为你的菜单ID默认顺序）
        $menuOrder = ['menu-home', 'menu-profile', 'menu-settings', 'menu-logout'];
    }

    // 设置响应头为JSON格式
    header('Content-Type: application/json');
    // 输出JSON数据
    echo json_encode($menuOrder);
} catch (PDOException $e) {
    http_response_code(500);
    echo json_encode(['error' => '数据库错误：' . $e->getMessage()]);
}
?>

关键说明 #

• 身份验证：通过会话机制确保只有已登录用户能获取自己的排序数据，避免数据泄露。
• 数据库存储：假设你将用户的排序数据以JSON字符串形式存储在users表的custom_menu_order字段中（保存时也是将前端传来的数组转为JSON字符串存入）。
• 默认排序：当用户没有自定义排序时，返回预设的默认菜单顺序，保证菜单能正常显示。

二、前端 JavaScript：加载排序并重新排列菜单 #

页面加载完成后，通过AJAX请求上述PHP接口获取排序数据，然后根据返回的顺序重新排列菜单元素，并刷新jQuery UI Sortable组件。

代码示例 #

$(document).ready(function() {
    // 初始化jQuery UI Sortable组件（你的原有代码）
    $("#sidr-id-mainList").sortable({
        stop: function(event, ui) {
            const result = $("#sidr-id-mainList").sortable("toArray");
            $.ajax({
                url: "example.com/API/menu/list/save",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ order: result }),
                success: function() {
                    console.log("菜单排序已保存");
                },
                error: function(xhr) {
                    console.error("保存排序失败：", xhr.responseText);
                }
            });
        }
    });

    // 加载用户自定义排序并应用到菜单
    $.ajax({
        url: "get-menu-order.php", // 对应你编写的PHP接口路径
        type: "GET",
        dataType: "json",
        success: function(menuOrder) {
            const $menuList = $("#sidr-id-mainList");
            // 按照返回的排序顺序重新排列菜单元素
            menuOrder.forEach(itemId => {
                const $menuItem = $("#" + itemId);
                if ($menuItem.length) {
                    // 将元素追加到列表末尾，实现重新排序
                    $menuList.append($menuItem);
                }
            });
            // 刷新Sortable组件，使其识别新的排序
            $("#sidr-id-mainList").sortable("refresh");
        },
        error: function(xhr) {
            console.error("加载排序失败：", xhr.responseText);
        }
    });
});

关键说明 #

• DOM重排逻辑：通过append()方法将每个菜单元素按顺序移动到列表末尾，因为append()会将已有元素从原位置移除并添加到目标位置，从而实现排序。
• Sortable刷新：调用sortable("refresh")确保组件感知到菜单顺序的变化，避免后续排序操作出现异常。
• 错误处理：添加AJAX请求的错误回调，便于调试和给用户提示。

三、补充注意事项 #

1. 菜单元素ID：确保每个菜单项的id属性与toArray()返回的ID一致，否则无法正确匹配和重排。
2. 跨域问题：如果你的前端和PHP接口不在同一域名下，需要配置CORS（跨域资源共享）规则，否则AJAX请求会被浏览器拦截。
3. 数据验证：保存和加载排序数据时，都要验证数据的合法性（比如菜单项ID是否存在），防止恶意数据破坏菜单结构。

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