JQuery UI Sortable投票排序结果如何传递至PHP页面并计算分数？

Hey there! Let's break down your questions step by step:

一、获取列表顺序的方式是否正确？ #

首先，只要你用的是jQuery UI Sortable官方提供的toArray()或serialize()方法来获取排序结果，那这个方式就是完全正确的——这两个方法就是专门为提取排序后的元素顺序设计的，比手动遍历DOM要可靠得多。

举两个常用的正确示例：

1. toArray()方法：返回排序后元素的id属性组成的数组，适合直接拿到顺序数组的场景：

// 假设你的排序容器是id为sortable的列表
var sortedIds = $("#sortable").sortable("toArray");
// 输出类似：["option-1", "option-3", "option-2", ...]

2. serialize()方法：会生成类似option[]=1&option[]=3的键值对字符串（前提是你的元素id格式为option-1这种前缀加ID的形式），适合直接作为表单数据提交：

var serializedData = $("#sortable").sortable("serialize");
// 输出类似：option[]=1&option[]=3&option[]=2

如果你的代码是用这两种方法之一，那完全没问题；如果是手动遍历DOM获取顺序，虽然也能实现，但容易受DOM结构变化影响，不如官方方法稳定。

二、推荐的POST传递方法 #

这里推荐两种常用且可靠的POST传递方案，你可以根据自己的场景选择：

方案1：用jQuery的$.post()异步提交（推荐，无页面刷新） #

这种方式适合想要异步提交、实时显示结果的场景，代码简洁且用户体验好：

JavaScript代码：

// 绑定提交按钮点击事件（或者排序完成后自动提交，根据需求调整）
$("#submit-vote").click(function() {
    // 获取排序后的ID数组
    var sortedOrder = $("#sortable").sortable("toArray");
    
    // 异步POST到PHP页面
    $.post("calculate-score.php", { vote_order: sortedOrder }, function(response) {
        // 成功获取结果后，把分数显示在页面上（比如id为result的容器）
        $("#result").html(response);
    }).fail(function() {
        // 处理请求失败的情况
        $("#result").html("提交失败，请重试");
    });
});

PHP代码（calculate-score.php）：

<?php
// 验证提交的数据是否合法
if (!isset($_POST['vote_order']) || !is_array($_POST['vote_order']) || count($_POST['vote_order']) !== 6) {
    echo "提交的数据无效";
    exit;
}

// 定义每个位置对应的分数（位置0是第一个，对应10分，以此类推）
$positionScores = [10, 15, 20, 25, 30, 35];
$totalScore = 0;
$optionScores = [];

// 遍历排序后的数组，计算每个选项的得分和总分
foreach ($_POST['vote_order'] as $index => $optionId) {
    // 提取选项ID（如果你的optionId是"option-1"这种格式，需要去掉前缀）
    $pureId = str_replace('option-', '', $optionId);
    $optionScores[$pureId] = $positionScores[$index];
    $totalScore += $positionScores[$index];
}

// 输出结果，可以是HTML或者JSON，这里以HTML为例
echo "<h3>你的投票得分</h3>";
echo "<p>总得分：{$totalScore}分</p>";
echo "<ul>";
foreach ($optionScores as $option => $score) {
    echo "<li>选项{$option}：{$score}分</li>";
}
echo "</ul>";
?>

方案2：通过隐藏表单字段提交（适合传统表单提交场景） #

如果你的项目更倾向于传统表单提交（页面刷新），可以把排序结果存入隐藏输入框，再提交表单：

HTML代码：

<form id="vote-form" method="POST" action="calculate-score.php">
    <ul id="sortable">
        <li id="option-1">选项1</li>
        <li id="option-2">选项2</li>
        <li id="option-3">选项3</li>
        <li id="option-4">选项4</li>
        <li id="option-5">选项5</li>
        <li id="option-6">选项6</li>
    </ul>
    <!-- 隐藏字段用来存储排序结果 -->
    <input type="hidden" id="sorted-order" name="sorted_order">
    <button type="button" id="submit-btn">提交排序</button>
</form>

JavaScript代码：

$("#submit-btn").click(function() {
    // 获取排序数组并转成JSON字符串（方便表单传递数组）
    var sortedOrder = $("#sortable").sortable("toArray");
    $("#sorted-order").val(JSON.stringify(sortedOrder));
    // 提交表单
    $("#vote-form").submit();
});

PHP代码（calculate-score.php）：

<?php
if (!isset($_POST['sorted_order'])) {
    echo "提交的数据无效";
    exit;
}

// 解析JSON字符串为数组
$sortedOrder = json_decode($_POST['sorted_order'], true);
if (!is_array($sortedOrder) || count($sortedOrder) !== 6) {
    echo "提交的数据无效";
    exit;
}

// 后面的分数计算逻辑和方案1完全一致
$positionScores = [10, 15, 20, 25, 30, 35];
$totalScore = 0;
$optionScores = [];

foreach ($sortedOrder as $index => $optionId) {
    $pureId = str_replace('option-', '', $optionId);
    $optionScores[$pureId] = $positionScores[$index];
    $totalScore += $positionScores[$index];
}

// 输出结果
echo "<h3>你的投票得分</h3>";
echo "<p>总得分：{$totalScore}分</p>";
echo "<ul>";
foreach ($optionScores as $option => $score) {
    echo "<li>选项{$option}：{$score}分</li>";
}
echo "</ul>";
?>

额外注意事项 #

• 数据验证：PHP端一定要验证提交的数据长度、格式是否合法，防止恶意提交无效数据破坏得分计算。
• ID命名规范：如果用serialize()方法，元素的ID最好遵循前缀-数字的格式（比如option-1），这样序列化后的数据会更规整。
• 错误处理：无论是异步提交还是表单提交，都要处理请求失败或数据无效的情况，给用户清晰的提示。

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