拖动式学生排座工具中spara函数无法保存坐标至PHP问题求助

我仔细梳理了你的代码，发现几个关键问题导致spara()函数看似无报错却无法完成保存，咱们一步步来解决：

1. 表单提交直接中断AJAX请求 #

你的保存按钮是<input type="submit">，点击它会默认触发表单的GET提交，页面会立刻刷新——这时候AJAX请求还没来得及和后端完成交互就被中断了，自然无法保存数据。

修复方案：
两种方式任选其一：

• 把按钮改成普通按钮：<button type="button" onclick="spara();">Spara</button>，彻底避免表单默认提交行为；
• 保留submit按钮，但修改spara()函数阻止默认行为：在函数末尾添加return false;，同时把按钮的onclick改为return spara();。

2. 前端坐标数组初始化逻辑错误 #

在spara()的循环里，你每次都重新初始化var coords=[];，这意味着循环结束后，数组里只会保留最后一个席位的坐标，之前的所有数据都被覆盖了，后端根本收不到完整的席位信息。

修复方案：
把coords数组的初始化移到循环外面，同时修正坐标获取的目标元素（应该取拖动容器#e+i的位置，而非子元素#p+i）：

function spara(){
    var antal = document.getElementsByClassName("e");
    var coords=[]; // 移到循环外部，避免每次覆盖
    for (var i = 1; i <= antal.length; i++) {
        var coord = $("#e" + i).position(); // 获取拖动容器的位置
        var item={
            id: i, // 传递席位ID，后端需要用它定位更新记录
            coordX: coord.left,
            coordY: coord.top
        };
        coords.push(item);
    }
    var order = { coords: coords };
    // 添加错误处理，方便排查问题
    $.post('updatecoords.php', {data: $.toJSON(order)}, function(response){
        $("#respond").text("保存成功：" + response);
    }).fail(function(xhr, status, error) {
        $("#respond").text("保存失败：" + error);
        console.log(xhr.responseText); // 查看后端返回的具体错误
    });
    return false; // 阻止表单默认提交
}

3. 后端代码的语法错误与逻辑偏差 #

你的后端代码存在几个致命问题：

• SQL语句拼接错误：WHERE id"= . substr($data->id, -1) .; 引号位置混乱，而且$data->id根本不存在（前端没传这个字段）；
• 坐标属性搞反：前端误把left存在coordTop、top存在coordLeft，后端又用这些反的字段更新x/y坐标；
• 代码位置错误：后端代码放在了主页面底部，但前端AJAX是提交到updatecoords.php，这段代码根本不会被执行。

修复方案：
把后端代码单独放到updatecoords.php里，修正逻辑并使用预处理语句避免SQL注入：

<?php
include ('config.php');

if(!isset($_POST["data"])){
    echo "未接收到数据";
    exit;
}

$data = json_decode($_POST["data"]);
if(!$data || !isset($data->coords)){
    echo "数据格式错误";
    exit;
}

foreach($data->coords as $item) {
    // 转换为整数类型，避免非法值
    $id = (int)$item->id;
    $x_coord = (int)$item->coordX;
    $y_coord = (int)$item->coordY;

    // 使用预处理语句，避免语法错误和SQL注入
    $sql = "UPDATE coords SET x_pos = ?, y_pos = ? WHERE id = ?";
    $stmt = $mysqli->prepare($sql);
    $stmt->bind_param("iii", $x_coord, $y_coord, $id);
    $stmt->execute();
    $stmt->close();
}

echo "成功保存" . count($data->coords) . "个席位的坐标";
?>

4. 主页面PHP的小问题 #

主页面里你注释掉了$x = $row['x_pos'];，导致echo席位样式时$x未定义，页面会出现隐性错误，记得取消注释：

// 取消这行的注释
$x = $row['x_pos'];
$y = $row['y_pos'];
echo '<div id="e'. $i .'" class="e" style="left:'.$x.'px; top:'.$y.'px;"><p id="p' . $i .'">'. $row1["Namn"] . " " . $row1["Efternamn"] . '</p></div>';

最后测试时，打开浏览器开发者工具（F12）的Console和Network标签，查看AJAX请求的状态和返回信息，这会帮你快速定位剩余问题。

内容的提问来源于stack exchange，提问作者helmjävel