通过Ajax发送多数组并从可排序关联列表更新SQL的问题

问题背景 #

页面有三个可拖拽关联的列表（employee、manager、admin），拖拽排序后需要通过Ajax将三个列表的排序数据发送到PHP脚本，更新数据库中对应项的权限和排序ID。但当前代码要么无响应，要么PHP抛出「Invalid argument supplied for foreach()」错误。

错误原因分析 #

1. 前端数据传递格式错误：使用sortable("serialize")得到的是类似id[]=3&id[]=42的查询字符串，直接拼接成emp=id[]=3&id[]=42&man=...会导致PHP解析时，id[]被当作独立参数，而非emp字段的数组内容，最终$_POST['emp']是字符串而非数组，引发foreach错误。
2. 后端代码笔误：处理admin列表的代码中，foreach循环错误使用了$man变量而非$adm，即使数据传递正确也会导致逻辑错误。

修正后的代码 #

前端JavaScript代码 #

$(document).ready(function(){
    $(".connectedSortable").sortable({
        connectWith: ".connectedSortable",
        update: function(event, ui) {
            // 提取每个列表的项ID，组成数组
            const emp = $("#sortable-emp li").map(function() {
                return $(this).attr("id").replace("id_", "");
            }).get();
            const man = $("#sortable-man li").map(function() {
                return $(this).attr("id").replace("id_", "");
            }).get();
            const adm = $("#sortable-adm li").map(function() {
                return $(this).attr("id").replace("id_", "");
            }).get();

            $.ajax({
                url: 'updatepageorder.php',
                type: 'post',
                data: { emp: emp, man: man, adm: adm }, // 直接传递数组，jQuery会自动处理为表单数组格式
                success: function(response){
                    toastr.success('页面排序已保存', '成功');
                    alert(response);
                },
                error: function (jqXhr, textStatus, errorMessage) {
                    alert('错误：' + errorMessage);
                },
            });
        }
    }).disableSelection();
});

PHP后端代码 #

<?php
$emp = [];
$man = [];
$adm = [];
$response = "";

// 处理employee列表
if(isset($_POST['emp']) && is_array($_POST['emp'])){
    $emp = $_POST['emp'];
    $count = 100;
    foreach($emp as $id){
        $sql = "UPDATE pagelist2 SET access = 'employee', listingid = ? WHERE id = ?";
        $pdo->prepare($sql)->execute([$count, $id]);
        $count++;
    }
    $response .= "empcount: ".$count."<br>";
}

// 处理manager列表
if(isset($_POST['man']) && is_array($_POST['man'])){
    $man = $_POST['man'];
    $count = 100;
    foreach($man as $id){
        $sql = "UPDATE pagelist2 SET access = 'manager', listingid = ? WHERE id = ?";
        $pdo->prepare($sql)->execute([$count, $id]);
        $count++;
    }
    $response .= "mancount: ".$count."<br>";
}

// 处理admin列表（修正了foreach的变量错误）
if(isset($_POST['adm']) && is_array($_POST['adm'])){
    $adm = $_POST['adm'];
    $count = 100;
    foreach($adm as $id){ // 这里之前错误用了$man，现在改为$adm
        $sql = "UPDATE pagelist2 SET access = 'admin', listingid = ? WHERE id = ?";
        $pdo->prepare($sql)->execute([$count, $id]);
        $count++;
    }
    $response .= "admcount: ".$count."<br>";
}

$response .= "操作完成。";
echo $response;
?>

关键改进点 #

• 前端数据格式优化：不再使用serialize的查询字符串，而是直接提取每个列表项的ID组成纯数组，通过jQuery的Ajax自动将数组转换为emp[]=3&emp[]=42的正确表单格式，PHP能直接解析为数组。
• 后端增加数组校验：使用is_array()确保接收的数据是数组，避免foreach错误；同时修正了admin部分的循环变量笔误。
• 代码可读性提升：简化了Ajax的参数传递，去掉了不必要的JSON序列化尝试，保持表单数据的原生格式，更易调试。

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