表单提交无跳转时弹出提示框的实现及响应类型咨询

要实现点击按钮时不跳转页面、弹出提示，同时完成表单提交，我们可以通过JavaScript阻止默认表单提交行为 + AJAX异步提交数据来实现，具体步骤如下：

1. 修正表单结构（解决按钮命名冲突） #

你的原表单里两个提交按钮的name都是accept，这会导致后端无法区分用户点击的是哪个按钮，先把它们的name统一改成action，值分别为accept和reject：

<form name="myForm" method="POST" id="myForm">
  <input type="submit" name="action" id="accept" value="Accept">
  <input type="submit" name="action" id="reject" value="Reject">
</form>

2. 添加JavaScript处理逻辑 #

我们需要监听表单的submit事件，阻止默认跳转，弹出提示，再用AJAX把数据发给后端：

const form = document.getElementById('myForm');

form.addEventListener('submit', async (e) => {
  // 1. 阻止表单默认提交（避免页面跳转）
  e.preventDefault();

  // 2. 获取用户点击的按钮值
  const clickedAction = e.submitter.value;

  // 3. 弹出提示框
  alert(`你点击了${clickedAction}，正在处理请求...`);

  // 4. 用AJAX异步提交表单数据
  try {
    const formData = new FormData(form);
    const response = await fetch(form.action, {
      method: form.method,
      body: formData
    });

    // 5. 处理后端响应
    const result = await response.json();
    if (response.ok) {
      alert(`操作成功：${result.message}`);
    } else {
      alert(`操作失败：${result.message}`);
    }
  } catch (error) {
    alert('网络错误，请稍后重试');
    console.error(error);
  }
});

3. 后端应返回的响应 #

后端接收到表单数据后，需要返回JSON格式的响应，同时保证HTTP状态码正确：

• 如果处理成功，返回状态码200 OK，响应体示例：

  {"status": "success", "message": "Accept操作已完成"}
  

• 如果处理失败，返回合适的错误状态码（比如400 Bad Request或500 Internal Server Error），响应体示例：

  {"status": "error", "message": "操作失败，请检查数据"}
  

这样既实现了无跳转提交，又能在点击按钮时弹出提示，还能根据后端响应给用户反馈。

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