如何改造AJAX代码实现页面多表单无刷新提交并指定触发逻辑？

嘿，这个需求我太熟悉了！要让多个表单各自无刷新提交到不同地址，核心就是通过表单的id或name属性做唯一标识，给每个表单绑定专属的提交逻辑就行。下面给你两种实用的实现方案，按需选择：

首先给每个表单设置独一无二的id（推荐，因为ID是唯一的），同时把提交地址写在表单的action属性里（也可以用自定义属性data-submit-url，灵活性更高）。示例HTML结构：

<!-- 表单1：提交到用户资料更新接口 -->
<form id="update-profile-form" action="/user/update-profile" method="POST">
  <input type="text" name="nickname" placeholder="修改昵称">
  <button type="submit">保存资料</button>
</form>

<!-- 表单2：提交到评论发布接口 -->
<form id="post-comment-form" action="/comment/post" method="POST">
  <textarea name="comment-content" placeholder="写下你的评论"></textarea>
  <button type="submit">发布评论</button>
</form>

这里有两种常用方式，分别适合不同场景：

方案一：逐个绑定表单事件（适合表单数量少且固定） #

直接通过ID获取每个表单，单独绑定submit事件，各自处理提交逻辑。好处是逻辑清晰，每个表单的处理完全独立：

// 处理用户资料表单
document.getElementById('update-profile-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止页面默认跳转
  const formData = new FormData(this); // 收集当前表单的所有数据
  const submitUrl = this.action; // 获取表单的提交地址

  // 发送AJAX请求（用fetch或者XMLHttpRequest都可以，这里用fetch示例）
  fetch(submitUrl, {
    method: this.method,
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 提交成功后的操作，比如提示用户
    console.log('资料更新成功:', data);
    alert('你的资料已经更新啦！');
  })
  .catch(error => {
    console.error('提交失败:', error);
    alert('提交出错了，请稍后重试');
  });
});

// 处理评论提交表单
document.getElementById('post-comment-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const submitUrl = this.action;

  fetch(submitUrl, {
    method: this.method,
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('评论发布成功:', data);
    // 比如把新评论添加到页面列表里
    const commentList = document.getElementById('comment-list');
    const newCommentItem = document.createElement('li');
    newCommentItem.textContent = data.content;
    commentList.appendChild(newCommentItem);
    // 清空表单内容
    this.reset();
  })
  .catch(error => {
    console.error('提交失败:', error);
    alert('评论发布失败，请重试');
  });
});

方案二：事件委托统一处理（适合多表单或动态新增表单） #

如果页面表单数量多，或者会动态添加表单（比如点击按钮新增评论框），用事件委托更高效——把事件绑定到父容器（比如document），通过判断触发事件的表单ID来执行对应逻辑：

// 绑定到document，监听所有表单的submit事件
document.addEventListener('submit', function(e) {
  const targetForm = e.target;
  // 根据表单ID判断要执行哪个处理逻辑
  switch(targetForm.id) {
    case 'update-profile-form':
      handleProfileSubmit(targetForm, e);
      break;
    case 'post-comment-form':
      handleCommentSubmit(targetForm, e);
      break;
    // 可以继续添加更多表单的case
    default:
      // 不是我们要处理的表单，放行默认提交行为
      return;
  }
});

// 封装资料表单的处理函数
function handleProfileSubmit(form, event) {
  event.preventDefault();
  const formData = new FormData(form);
  fetch(form.action, {
    method: form.method,
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    console.log('资料更新成功:', data);
    alert('资料保存成功！');
  })
  .catch(err => console.error('提交出错:', err));
}

// 封装评论表单的处理函数
function handleCommentSubmit(form, event) {
  event.preventDefault();
  const formData = new FormData(form);
  fetch(form.action, {
    method: form.method,
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    console.log('评论发布成功:', data);
    // 更新页面评论列表
    const commentList = document.getElementById('comment-list');
    const newComment = document.createElement('div');
    newComment.className = 'comment-item';
    newComment.innerHTML = `<p>${data.content}</p><small>发布于${new Date().toLocaleString()}</small>`;
    commentList.appendChild(newComment);
    // 清空表单
    form.reset();
  })
  .catch(err => console.error('提交出错:', err));
}

如果每个表单需要不同的配置（比如成功提示文案、是否自动重置表单），可以用HTML的data-*自定义属性，比如：

<form id="update-profile-form" action="/user/update-profile" method="POST" data-success-tip="资料更新成功！" data-auto-reset="false">
  <!-- 表单内容 -->
</form>

然后在JS里读取这些配置：

const successTip = form.dataset.successTip || '提交成功';
const autoReset = form.dataset.autoReset === 'true';
alert(successTip);
if(autoReset) form.reset();

这样不管你有多少个表单，只要给它们设置唯一的ID，然后对应编写处理逻辑，就能完美实现每个表单独立无刷新提交到不同地址的需求啦！

内容的提问来源于stack exchange，提问作者John C.