JavaScript动态生成数组型表单数据并提交至PHP的最佳实践

<input type="hidden" name="deletedImages[]" value="1">
<input type="hidden" name="deletedImages[]" value="2">
<input type="hidden" name="deletedImages[]" value="3">

// 获取所有删除按钮，这些按钮通常会触发添加待删除图片ID的操作
const deleteButtons = document.querySelectorAll('.delete-resource');

// 获取最初的隐藏输入框，通常用于占位或作为模板
const removedImagesInput = document.querySelector('.deleted-images');

// 获取其父元素，新创建的输入框将插入到这里
const removedImagesInputParent = removedImagesInput.parentNode;

// 移除最初的空值输入框，避免提交一个空的数组元素
// 这样做是为了确保如果用户没有删除任何图片，就不会提交一个空的 `deletedImages[]` 元素
if (removedImagesInput) {
    removedImagesInputParent.removeChild(removedImagesInput);
}


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

        // 获取要删除图片的ID
        const imageId = item.getAttribute('data-image-id');

        // 创建一个新的隐藏输入框元素
        // cloneNode(false) 表示只克隆元素本身，不克隆其子节点
        const elInput = removedImagesInput.cloneNode(false);

        // 设置新输入框的value为当前图片的ID
        elInput.value = imageId;

        // 将新创建的输入框添加到DOM中，通常是其父元素
        removedImagesInputParent.appendChild(elInput);
    });
});

<?php
if (isset($_POST['deletedImages']) && is_array($_POST['deletedImages'])) {
    $deletedImages = $_POST['deletedImages'];
    // 此时 $deletedImages 将是一个数组，例如 [1, 2, 3]
    print_r($deletedImages);

    // 如果需要确保所有元素都是整数，可以进行类型转换
    $deletedImages = array_map('intval', $deletedImages);
    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';
       const imageId = parseInt(item.getAttribute('data-image-id'));

       // 检查当前值是否为空，如果为空则直接赋值，否则添加逗号分隔
       if (removedImagesInput.value === '') {
           removedImagesInput.value = imageId;
       } else {
           removedImagesInput.value += ',' + imageId;
       }
    });
});

<?php
if (isset($_POST['deletedImages']) && !empty($_POST['deletedImages'])) {
    $deletedImagesString = $_POST['deletedImages'];
    // 使用 explode 函数将字符串按逗号分割成数组
    $deletedImages = explode(",", $deletedImagesString);

    // 此时 $deletedImages 将是一个数组，例如 ["1", "2", "3"]
    print_r($deletedImages);

    // 如果需要确保所有元素都是整数，可以进行类型转换
    $deletedImages = array_map('intval', $deletedImages);
    print_r($deletedImages);
} else {
    echo "没有接收到待删除图片ID或数据为空。";
}
?>