如何将数组存入隐藏输入框解决setAttribute类型不匹配报错

报错原因 #

setAttribute 方法的第二个参数要求必须传入字符串类型，直接传入数组类型会触发类型不匹配的语法提示，即使运行时数组会隐式转为逗号拼接的字符串，也不符合后续的结构化解析要求。

可用修复方案 #

方案1：转JSON字符串存储（推荐） #

这是兼容性最高的存储方式，后续无论前端还是后端都可以直接解析出原数组结构：

const arr = ["0.00", "15.00", "15.00"];
// 数组转JSON字符串后赋值
document.querySelector("#lengthParams").setAttribute('value', JSON.stringify(arr)); 

后续取值解析逻辑：

• 前端取值：const arr = JSON.parse(document.querySelector("#lengthParams").value)
• 后端（PHP）取值：$arr = json_decode($_POST['lengthParams']);

方案2：自定义分隔符拼接存储 #

如果数组元素均为不包含特殊字符的简单值，也可以用指定分隔符拼接为字符串：

const arr = ["0.00", "15.00", "15.00"];
// 用逗号拼接为字符串
document.querySelector("#lengthParams").setAttribute('value', arr.join(',')); 

后续取值解析逻辑：

• 前端取值：const arr = document.querySelector("#lengthParams").value.split(',')
• 后端（PHP）取值：$arr = explode(',', $_POST['lengthParams']);

补充优化 #

你也可以直接操作DOM的value属性代替setAttribute写法，更简洁：

document.querySelector("#lengthParams").value = JSON.stringify(arr);

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