如何通过Ajax向PHP提交多组表单数据并分别存储为JSON文件

第一步：调整HTML表单结构 #

首先给每组日期的输入项包裹分组容器，同时将输入框的name属性改为数组格式，避免同名参数覆盖：

<!-- 每天一组，共31组 -->
<div class="day-item">
  <input type="text" value="2021-05-01" class="date" name="startdate[]">                        
  <input type="text" value="10:00" class="starttime" name="starttime[]">                        
  <input type="text" value="17:00" class="endtime" name="endtime[]">                        
  <input type="text" value="7" class="hours" name="total[]">
</div>
<div class="day-item">
  <input type="text" value="2021-05-02" class="date" name="startdate[]">                        
  <input type="text" value="11:00" class="starttime" name="starttime[]">                        
  <input type="text" value="17:00" class="endtime" name="endtime[]">                        
  <input type="text" value="6" class="hours" name="total[]">
</div>
<!-- 剩余日期按相同格式补充 -->

第二步：修改前端Ajax提交逻辑 #

遍历所有分组，批量组装数据后一次性提交，同时修正原有代码的语法错误：

// 初始化批量数据数组
let daysData = [];
// 遍历每天的分组
$('.day-item').each(function() {
  let item = {
    date: $(this).find('.date').val(),
    starttime: $(this).find('.starttime').val(),
    endtime: $(this).find('.endtime').val(),
    hours: $(this).find('.hours').val()
  };
  daysData.push(item);
});

// 批量提交
$.ajax({
  url: 'process.php',
  data: { days: daysData },
  type: "POST",
  success: function (data) {          
    $('.response').html(data);
  }
});

第三步：调整PHP后端处理逻辑 #

接收批量数据后循环处理，复用原有单条存储逻辑即可，同时修正原代码里ID拼接重复的问题：

<?php
// 先检查存储目录是否存在，不存在则创建
if (!is_dir('data')) {
  mkdir('data', 0755, true);
}

$successCount = 0;
$failCount = 0;
// 接收批量数据
$daysList = $_POST['days'] ?? [];

foreach ($daysList as $item) {
  $maydata = [];
  $maydata['date'] = $item['date'];
  $maydata['starttime'] = $item['starttime'];
  $maydata['endtime'] = $item['endtime'];
  $maydata['hours'] = $item['hours'];

  // 修正原逻辑重复拼接date的问题，生成符合要求的文件名
  $id = 'id_' . str_replace('-', '', $maydata['date']);
  $file = 'data/' . $id . '.json';
  $jsonData = json_encode($maydata, JSON_NUMERIC_CHECK | JSON_PRETTY_PRINT);
  
  if (file_put_contents($file, $jsonData)) {
    $successCount++;
  } else {
    $failCount++;
  }
}

echo "数据处理完成：成功存储{$successCount}条，失败{$failCount}条";
?>

补充说明 #

• 调整后生成的单个JSON文件结构和原有格式完全一致，不需要修改后续的读取逻辑
• 提交时仅发送一次请求，相比循环提交31次性能更高，也不会出现请求并发问题
• 增加了目录自动创建和成功失败统计，方便排查问题

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