表单提交表格数据时JS结构正常但PHP接收结构异常排查

核心问题 #

1. 数组直接转字符串导致结构丢失：将JS数组array_big直接赋值给hidden输入的value属性时，JS会自动把数组转为逗号分隔的字符串（比如id1,num1,name1,prefix1,id2,num2,...），PHP接收后只会得到一个包含该字符串的一维数组，完全丢失了原本的二维结构。
2. 语法错误：设置name属性的代码缺少闭合括号，会导致JS执行失败：

   input.setAttribute('name', "CallerIdsList[][]"; // 缺少闭合的 )
   

修复方案 #

方案1：用JSON序列化传递数组 #

修改JS代码，将数组转为JSON字符串，PHP端再解码还原结构：

$('#form').submit(function() {
    let input = document.createElement('input');
    input.setAttribute('type', "hidden");
    input.setAttribute('name', "CallerIdsList"); // 无需[][]，传递单个JSON字符串

    let array_big = [];
    $(".callernum-row").each(function(_index, _element) {
        let array_small = [];
        // 加trim()避免HTML空白字符干扰数据
        let id = $(this).find(".callernum-id").text().trim();
        let num = $(this).find(".callernum-num").text().trim();
        let name = $(this).find(".callernum-name").text().trim();
        let prefix = $(this).find(".callernum-prefix").text().trim();

        array_small.push(id);
        array_small.push(num);
        array_small.push(name);
        array_small.push(prefix);
        array_big.push(array_small);
    });

    input.setAttribute('value', JSON.stringify(array_big)); // 序列化为JSON字符串
    this.appendChild(input);

    return true;
});

PHP接收端解码：

$CallerIdsList = json_decode($_POST['CallerIdsList'], true);
// 此时$CallerIdsList就是和JS中一致的二维数组

方案2：为每个元素创建独立hidden输入 #

这种方式不需要JSON，PHP会自动解析为二维数组：

$('#form').submit(function() {
    $(".callernum-row").each(function(_index, _element) {
        let id = $(this).find(".callernum-id").text().trim();
        let num = $(this).find(".callernum-num").text().trim();
        let name = $(this).find(".callernum-name").text().trim();
        let prefix = $(this).find(".callernum-prefix").text().trim();

        // 按二维数组命名规则创建独立hidden输入
        createHiddenInput(this, `CallerIdsList[${_index}][0]`, id);
        createHiddenInput(this, `CallerIdsList[${_index}][1]`, num);
        createHiddenInput(this, `CallerIdsList[${_index}][2]`, name);
        createHiddenInput(this, `CallerIdsList[${_index}][3]`, prefix);
    });

    return true;
});

// 封装创建hidden输入的函数
function createHiddenInput(form, name, value) {
    let input = document.createElement('input');
    input.setAttribute('type', "hidden");
    input.setAttribute('name', name);
    input.setAttribute('value', value);
    form.appendChild(input);
}

PHP接收时直接使用：

$CallerIdsList = $_POST['CallerIdsList'];
// 已经是正确的二维数组结构

额外建议 #

• 用trim()处理获取到的文本，避免HTML中的换行、空格导致数据包含多余空白字符。
• 调试时可以在JS中打印JSON.stringify(array_big)确认结构，PHP端用var_dump($_POST)查看原始接收数据，快速定位问题。

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