while循环生成同ID表单Ajax提交异常问题（Java/Ajax/PHP）

HTML 标准明确规定同一页面内 id 属性值必须全局唯一。你通过循环生成了 5 个 id 完全相同的表单、输入框元素，jQuery 的 id 选择器 $('#msg-form-nota') 只会匹配页面中第一个出现的对应元素，剩余 4 个表单根本没有绑定上 Ajax 提交事件。点击这些未绑定事件的表单提交按钮时，会触发浏览器原生表单提交逻辑，默认以 GET 方式把参数拼接到 URL 上发起请求，和预期的 Ajax 提交效果不符。

1. 调整HTML结构，移除重复id #

循环渲染的表单不需要重复设置相同id，统一给表单加通用类名即可，同时移除内部输入框的重复id，靠name属性定位字段：

<!-- 循环输出的每个表单都使用该结构 -->
<form class="grade-form"> 
  <input type="hidden" name="id_nota" value="${project.id}">
  <label>Calificación obtenida:</label>
  <input type="text" name="nota" class="form-control form-control-sm" value="${project.nota}" placeholder="Introducir calificación"><br>
  <input type="submit" class="btn btn-success btn-sm" value="Añadir/modificar calificación">
</form>

2. 修改JS绑定逻辑，基于当前表单上下文取值 #

用类选择器给所有表单绑定提交事件，提交时通过事件对象拿到当前触发提交的表单实例，只在当前表单范围内查找输入框取值，避免取到其他表单的内容：

$('.grade-form').submit(e => {    
  e.preventDefault();
  // 获取当前触发提交的表单对象
  const currentForm = $(e.currentTarget);
  const postData = {
    nota: currentForm.find('input[name="nota"]').val(),
    id: currentForm.find('input[name="id_nota"]').val()
  };

  $.post('accion.php', postData, () => {
    toastr.success('añadidas!', 'Actualización ', {"hideDuration": 1500});
  });
});

动态渲染场景兼容 #

如果表单是在页面初始加载完成后，通过JS动态追加渲染的，直接绑定事件可能无法覆盖后续新增的表单，可以改用事件委托的写法，把事件绑定到表单外层已经存在的静态父容器上（比如页面加载时就存在的表单列表容器，没有合适容器也可以直接绑在document上）：

// 替换成你实际的表单外层静态容器选择器即可
$('.form-container').on('submit', '.grade-form', e => {
  e.preventDefault();
  const currentForm = $(e.currentTarget);
  const postData = {
    nota: currentForm.find('input[name="nota"]').val(),
    id: currentForm.find('input[name="id_nota"]').val()
  };

  $.post('accion.php', postData, () => {
    toastr.success('añadidas!', 'Actualización ', {"hideDuration": 1500});
  });
});

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