如何用单个AJAX处理多个循环生成的表单提交？

这是个很常见的前端问题，主要是因为你代码里存在几个关键问题：重复的ID、错误的事件绑定选择器，以及没有针对当前提交的表单进行操作。我来帮你一步步修正：

第一步：修正HTML结构（去掉重复ID） #

HTML里的ID必须是唯一的，你现在多个表单和按钮用了相同的id="form"和id="buttona"，这会导致JS只能找到第一个匹配的元素。我们把重复的ID换成class，同时给表单加一个专门用于AJAX绑定的class（比如ajax-form），方便后续选择：

<form class="form-horizontal ajax-form" method="post" >
  <input type="text" class="form-control" name="name" value="test1">
  <input type="text" class="form-control" name="car_type">
  <!-- 用class代替唯一ID，每个表单单独显示提示 -->
  <div class="text-error"></div>
  <button type="submit" class="buttona">Send</button>
</form>
<form class="form-horizontal ajax-form" method="post" >
  <input type="text" class="form-control" name="name" value="test2">
  <input type="text" class="form-control" name="car_type" value="test2">
  <div class="text-error"></div>
  <button type="submit" class="buttona">Send</button>
</form>

第二步：修改AJAX事件绑定逻辑 #

原代码里用$(".form")绑定事件，但你的表单class是form-horizontal，根本没绑定到正确的元素上。现在我们绑定到新添加的ajax-form类，并且在事件里获取当前触发提交的表单，操作这个表单内的按钮，而不是全局的按钮：

$(document).ready(function(){
  // 绑定到所有需要AJAX提交的表单
  $(".ajax-form").submit(function(e) {
    e.preventDefault(); // 阻止默认提交行为
    const $currentForm = $(this); // 获取当前提交的表单对象
    const $submitBtn = $currentForm.find(".buttona"); // 获取当前表单内的提交按钮

    // 修改按钮状态，防止重复提交
    $submitBtn.html('...').attr("disabled", "disabled");
    
    // 把当前表单传给sendInfo函数
    sendInfo($currentForm);
  });
});

第三步：更新sendInfo函数，针对当前表单处理 #

原函数里直接序列化$(".form")会取第一个表单的数据，现在我们接收当前表单作为参数，序列化这个表单的数据，并且更新当前表单内的提示信息：

function sendInfo($currentForm) {
  $.ajax({
    type: 'POST',
    url: '../process.php',
    data: $currentForm.serialize(), // 序列化当前表单的所有数据
    success: function(data){
      const $errorText = $currentForm.find(".text-error");
      // 加trim避免返回的字符串带空格导致判断错误
      if(data.trim() === 'Success') {
        $errorText.html('added');
      } else {
        $errorText.html('not added'); // 修正原拼写错误：not aadded
      }
      // 恢复按钮状态（可选，根据需求决定是否恢复）
      $currentForm.find(".buttona").html('Send').removeAttr("disabled");
    },
    // 增加错误回调，处理请求失败的情况
    error: function() {
      const $errorText = $currentForm.find(".text-error");
      $errorText.html('An error occurred while submitting');
      $currentForm.find(".buttona").html('Send').removeAttr("disabled");
    }
  });
  return false;
}

关键修改点说明： #

1. 唯一ID原则：永远不要在HTML里用重复的ID，这会导致JS和CSS选择器只能匹配第一个元素。
2. 当前上下文：通过$(this)获取触发事件的表单，确保所有操作都针对这个表单，而不是全局元素。
3. 数据准确性：序列化当前表单的数据，保证提交的是用户操作的那个表单的内容。
4. 用户体验：增加错误处理和按钮状态恢复，避免用户多次点击或不知道提交失败。

内容的提问来源于stack exchange，提问作者kim de castro