通过Ajax将多个HTML表单字段传递至PHP数组的实现求助

原代码核心问题 #

• JS误用了不存在的ID选择器，HTML输入框仅定义name属性，未设置对应id
• $(this).serializeArray()只能获取触发事件的单个输入框数据，无法收集所有相关字段
• 循环逻辑错误，未关联同索引的三个输入值，且数据结构与PHP接收端不匹配
• PHP接收的键名与JS发送的参数名不一致，导致无法正确获取数组

修正后的完整代码 #

HTML（建议包裹在form标签内，简化数据收集）

<form id="reportForm">
  <input class="form-control" type="date" name="testreportname[]">
  <input class="form-control" type="date" name="testreportdate[]">
  <input class="form-control" type="date" name="testreportissue[]">
  <!-- 动态添加的多行输入框可继续使用相同name格式 -->
</form>

JavaScript（jQuery版本）

<script>
// 给所有输入框绑定change事件，触发保存逻辑
$('#reportForm input').on('change', function() {
  // 直接序列化整个表单，自动处理数组格式
  var formData = $('#reportForm').serialize();

  $.ajax({
    type: "POST",
    url: "draftsave.php",
    data: formData,
    dataType: "json",
    success: function(result) {
      console.log('保存成功:', result);
    },
    error: function(xhr, status, error) {
      console.error('保存失败:', error);
    }
  });
});
</script>

说明：serialize()会自动将name="xxx[]"的字段序列化为PHP可识别的数组格式，无需手动拼接数据

PHP（draftsave.php）

<?php
// 直接获取三个数组，PHP会自动解析前端发送的xxx[]格式参数
$testReportNames = $_POST['testreportname'] ?? [];
$testReportDates = $_POST['testreportdate'] ?? [];
$testReportIssues = $_POST['testreportissue'] ?? [];

// 处理数组数据，兼容数组长度不一致的情况
$maxCount = max(count($testReportNames), count($testReportDates), count($testReportIssues));
for ($i = 0; $i < $maxCount; $i++) {
  $name = $testReportNames[$i] ?? '';
  $date = $testReportDates[$i] ?? '';
  $issue = $testReportIssues[$i] ?? '';
  
  // 此处编写业务逻辑，如存入数据库等
}

// 返回JSON格式响应
echo json_encode([
  'status' => 'success',
  'message' => '数据已接收',
  'data' => [
    'names' => $testReportNames,
    'dates' => $testReportDates,
    'issues' => $testReportIssues
  ]
]);
?>

关键说明 #

1. 表单序列化：jQuery的serialize()方法可自动处理带[]的name属性，生成符合PHP数组接收要求的参数
2. PHP数组接收：前端发送name="xxx[]"的字段时，PHP会直接解析为数组，无需额外处理
3. 容错处理：使用?? []避免未传参时报错，循环时兼容三个数组长度不一致的场景

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