使用AJAX提交append新增字段遇阻，请求排查错误原因

问题分析 #

你的代码主要存在两个核心问题：

1. 重复ID违反HTML规范
   HTML中id属性必须是唯一的，但你新增的输入框和原输入框使用了相同的id="firstName"和id="lastName"。jQuery通过$("#firstName")选择元素时，只会返回页面上第一个匹配该ID的元素，所以永远只能拿到第一组输入框的值。

2. 数据收集逻辑错误
   你手动给insert数组赋值时，只取了单个输入框的数值，没有遍历所有动态生成的同名输入框，自然无法获取后续新增的所有数据。

解决方案 #

我们需要修正ID问题，同时调整数据收集的逻辑，确保能获取所有输入框的值：

1. 修正HTML与动态新增逻辑

首先去掉重复的id（因为我们可以通过name属性来选择元素，不需要重复ID）：

<div id="append-fields">
  <input name="firstName[]" value="john">
  <input name="lastName[]" value="Doe">
</div>
<button onclick="appendFunction()" type="button">Add a new row</button>

对应的appendFunction也要确保新增的元素不使用重复ID：

function appendFunction() {
  $("#append-fields").append(`
    <input name="firstName[]" value="anna">
    <input name="lastName[]" value="Kondo">
  `);
}

2. 修正AJAX数据收集逻辑

我们可以通过遍历所有name为firstName[]和lastName[]的输入框来收集全部数据，或者更便捷地使用jQuery的serialize()方法：

方式一：手动遍历收集

// 收集所有firstName的值
const firstNames = [];
$('input[name="firstName[]"]').each(function() {
  firstNames.push($(this).val());
});

// 收集所有lastName的值
const lastNames = [];
$('input[name="lastName[]"]').each(function() {
  lastNames.push($(this).val());
});

$.ajax({
  url: 'myUrl',
  method: 'POST',
  data: {
    firstName: firstNames,
    lastName: lastNames
  },
  error: function () { },
  success: function (response) {
    $('#overlay').addClass("hidden");
    jQuery('#body').html(response);
  }
});

方式二：使用serialize()简化收集（推荐）

serialize()会自动将所有表单元素按name属性打包成符合URL编码的字符串，对于数组形式的name也能正确处理：

$.ajax({
  url: 'myUrl',
  method: 'POST',
  data: $('#append-fields').find('input').serialize(),
  error: function () { },
  success: function (response) {
    $('#overlay').addClass("hidden");
    jQuery('#body').html(response);
  }
});

3. PHP接收数据的调整

无论使用哪种方式，PHP中都可以通过数组形式接收数据：

function myUrl(){
  // 获取所有firstName和lastName数组
  $firstNames = $_POST["firstName"];
  $lastNames = $_POST["lastName"];

  // 遍历处理每一组数据
  foreach($firstNames as $index => $firstName) {
    $lastName = $lastNames[$index];
    // 这里可以添加你的业务逻辑，比如存入数据库等
    // echo "姓名：{$firstName} {$lastName}<br>";
  }
}

关键要点总结 #

• 严格遵守HTML规范，不要使用重复的ID，避免选择器逻辑出错。
• 动态生成的表单元素，收集数据时要遍历所有匹配的元素，或者使用serialize()这类便捷方法。
• 数组形式的name属性（如firstName[]）会自动被PHP解析为数组，方便批量处理多组数据。

内容的提问来源于stack exchange，提问作者AbuuJurayj Swabur Buruhan