JavaScript Fetch API向PHP提交表单输入数组失败及解决方法

问题分析 #

我之前碰到过一模一样的坑！你现在的问题核心在于：document.getElementsByName('pers[]')返回的是DOM元素集合（NodeList），而非输入框的实际值数组。当你直接把这个元素集合传给JSON.stringify时，它没办法自动提取每个输入框的value属性，反而会序列化DOM元素的内部结构，所以PHP那边拿到的是一堆元素的元数据（比如你看到的_fs相关值），完全不是你想要的"Ana & Peter"这类输入内容。

修复方案 #

你需要先把类数组的NodeList转换成真正的JS数组，再通过map方法提取每个输入框的value值，生成纯字符串数组后再传给Fetch。

修改后的完整代码 #

JavaScript Fetch提交部分

// 先提取每个输入框的value值，生成纯字符串数组
var nombresgranada = [].slice.call(document.getElementsByName("pers[]")).map(input => input.value);
fetch('/pasarelatours/incl-booking.php', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    lastInsertId: lastInsertId,
    language: language,
    nombresgranada: nombresgranada
  })
})
.then(function (response) { return response.text(); })
.then(function (body) { document.getElementById('test').innerHTML = body; });

PHP接收部分（无需修改，保持原代码即可）

$json_str = file_get_contents('php://input');
$json_obj = json_decode($json_str);
var_dump($json_obj->nombresgranada);
echo print_r($json_obj);
echo '</pre>';

为什么这样有效？ #

• [].slice.call(NodeList)：把类数组的NodeList转换成真正的JavaScript数组，这样就能调用数组专属的map方法了
• .map(input => input.value)：遍历数组里的每个输入框元素，提取它们的value属性，最终得到一个由用户输入值组成的纯字符串数组
• 此时再传给JSON.stringify，序列化出来的就是正常的字符串数组，PHP那边解析后就能拿到你预期的有效值了

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