PHP循环内无刷新提交表单：JS放置位置与唯一标识问题

一、JS代码必须放在外部，绝对不能写在foreach循环内部 #

如果把JS代码嵌入foreach循环，每生成一个表单就会复制一段几乎完全相同的事件绑定代码，页面有多少个表单就会有多少段冗余JS，既增加页面体积拖慢加载速度，后期维护也会变得异常麻烦。

二、外部JS的实现方案（两种可选） #

核心是用通用选择器绑定事件，无需为每个表单单独写绑定逻辑，同时要保证页面元素标识合法（ID不能重复）。

方案1：事件委托（推荐，简洁高效）

利用事件冒泡机制，在父容器或全局监听submit事件，判断触发事件的目标是否为关注表单，再执行处理逻辑。这种方式不依赖表单唯一ID，还能支持动态生成的表单。

首先修正HTML代码（注意：循环内元素不能用重复ID，将id="atualizar"改为class="atualizar"，同时修复隐藏域的PHP语法错误）：

<?php foreach ($cards as $card): ?>
<form method="POST" class="follow-form" id="follow<?php echo $card['user_id']; ?>">
  <input type="hidden" name="target" value="<?php echo $card['user_id']; ?>">
  <div class="atualizar">
    <!-- 这里放置你的按钮，例如： -->
    <button type="submit">关注</button>
  </div>
</form>
<?php endforeach; ?>

然后将JS代码放在页面底部或外部JS文件中：

// 监听全局submit事件
document.addEventListener('submit', function(e) {
  const targetForm = e.target;
  // 判断是否为目标关注表单
  if (targetForm.classList.contains('follow-form')) {
    e.preventDefault(); // 阻止默认表单提交

    const formData = new FormData(targetForm);

    fetch('../config/follow.php', {
      method: 'post',
      body: formData
    })
    .then(response => response.text())
    .then(() => {
      // 仅刷新当前表单内的更新区域，避免全局刷新
      const updateArea = targetForm.querySelector('.atualizar');
      // jQuery加载方式
      $(updateArea).load(window.location.href + ' ' + updateArea.selector);
      // 原生JS替代方案（无需jQuery）：
      // fetch(window.location.href)
      //   .then(res => res.text())
      //   .then(html => {
      //     const newContent = new DOMParser().parseFromString(html, 'text/html')
      //       .querySelector(`#follow${formData.get('target')} .atualizar`).innerHTML;
      //     updateArea.innerHTML = newContent;
      //   });
    })
    .catch(() => {
      alert('无法完成操作，请稍后重试');
    });
  }
});

方案2：遍历所有目标表单绑定事件

如果一定要保留表单的唯一ID，也可以通过遍历特定前缀的表单来批量绑定事件：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 选择所有ID以follow开头的表单
  const followForms = document.querySelectorAll('[id^="follow"]');
  
  followForms.forEach(form => {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(this);

      fetch('../config/follow.php', {
        method: 'post',
        body: formData
      })
      .then(response => response.text())
      .then(() => {
        // 刷新当前表单内的更新区域
        const updateArea = this.querySelector('.atualizar');
        $(updateArea).load(window.location.href + ' ' + updateArea.selector);
      })
      .catch(() => {
        alert('无法完成操作，请稍后重试');
      });
    });
  });
});

关键注意事项 #

1. 禁止循环内使用重复ID：你原代码中的div id="atualizar"在循环中会生成多个相同ID，违反HTML规范，JS选择器只会选中第一个匹配元素，必须改为class。
2. 修复隐藏域PHP语法错误：原代码value="php $card['user_id'] "是错误写法，正确应为value="<?php echo $card['user_id']; ?>"。

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