如何在前端通过隐藏输入域向PHP后端发送数组数据

<input type="hidden" name="itemIds[]" value="101">
<input type="hidden" name="itemIds[]" value="102">
<input type="hidden" name="itemIds[]" value="103">

// 获取所有删除按钮
const deleteButtons = document.querySelectorAll('.delete-resource');
// 获取初始的隐藏输入域（通常用于模板或占位符）
const removedImagesInput = document.querySelector('.deleted-images');
// 获取隐藏输入域的父元素，以便在其内部添加新的输入域
const removedImagesInputParent = removedImagesInput.parentNode;

// 初始时，移除可能存在的空值占位符输入域，避免提交空值
// 这一步是可选的，取决于你的初始HTML结构，但通常推荐
if (removedImagesInput) {
    removedImagesInputParent.removeChild(removedImagesInput);
}

// 为每个删除按钮添加点击事件监听器
deleteButtons.forEach((item) => {
    item.addEventListener('click', function () {
        // 隐藏被删除图片对应的预览区域
        item.closest('.input-photo-preview').style.display = 'none';

        // 创建一个新的隐藏输入元素
        const elInput = document.createElement('input');
        elInput.type = 'hidden'; // 设置为隐藏类型
        elInput.name = 'deletedImages[]'; // 关键：设置name为数组形式
        elInput.value = item.getAttribute('data-image-id'); // 设置值为当前删除图片的ID

        // 将新创建的隐藏输入元素添加到DOM中，通常是表单内部
        removedImagesInputParent.appendChild(elInput);

        // 可以在此处打印验证，确保元素已添加
        // console.log("Added input:", elInput);
    });
});

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['deletedImages']) && is_array($_POST['deletedImages'])) {
        $deletedImages = $_POST['deletedImages'];

        // 此时 $deletedImages 已经是一个数组，例如：[ "1", "2", "3" ]
        // 注意：HTML表单提交的值默认是字符串类型，即使它们看起来是数字
        // 如果需要确保是整数类型，可以使用 array_map
        $deletedImages = array_map('intval', $deletedImages);

        echo "接收到的删除图片ID：";
        print_r($deletedImages);
    } else {
        echo "没有删除图片ID被提交。";
    }
}
?>

const deleteButtons = document.querySelectorAll('.delete-resource');
const removedImagesInput = document.querySelector('.deleted-images'); // 假设只有一个此类的隐藏输入

deleteButtons.forEach((item) => {
    item.addEventListener('click', function () {
       item.closest('.input-photo-preview').style.display = 'none';
       // 将新的ID添加到现有值的末尾，并用逗号分隔
       // 注意：需要处理初始为空值的情况，避免出现 ",ID"
       const currentVal = removedImagesInput.value;
       const newId = parseInt(item.getAttribute('data-image-id'));
       if (currentVal === '') {
           removedImagesInput.value = newId;
       } else {
           removedImagesInput.value += ',' + newId;
       }
    });
})

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['deletedImages']) && $_POST['deletedImages'] !== '') {
        $commaSeparatedString = $_POST['deletedImages'];

        // 使用 explode 函数将字符串拆分为数组
        $deletedImages = explode(",", $commaSeparatedString);

        // 如果需要确保是整数类型
        $deletedImages = array_map('intval', $deletedImages);

        echo "接收到的删除图片ID：";
        print_r($deletedImages);
    } else {
        echo "没有删除图片ID被提交。";
    }
}
?>