表单提交后页面意外刷新问题求助（已用preventDefault但无效）

问题根源 #

你的代码存在两个核心问题：

1. 同时给表单绑定了submit事件，又给表单内的提交按钮绑定了click事件，导致事件重复触发，且按钮的click事件未阻止表单提交的默认行为。
2. 重复的事件绑定不仅会导致请求重复发送，还会让form上的e.preventDefault()无法完全覆盖所有提交触发路径，最终引发页面刷新。

display和download表单看似正常，是因为它们的事件处理中修改了DOM，偶然干扰了默认提交流程，但这并非正确的处理方式。

修复步骤 #

1. 删除按钮的click事件绑定：只保留表单的submit事件处理——表单的submit事件会在点击提交按钮、按下回车等所有提交场景下触发，更可靠。
2. 确保submit事件中的e.preventDefault()优先执行：将该语句放在事件处理函数最开头，避免因后续代码报错导致默认行为未被阻止。
3. 优化代码复用（可选）：把重复的请求和响应处理逻辑抽成独立函数，减少冗余代码。

修复后的完整代码 #

HTML（无需修改）

<div class="content active">
  <form data-form-type="add">
    <input type="text" name="name" placeholder="Imie" />
    <input type="email" name="email" placeholder="E-mail" />
    <input
      type="text"
      name="status"
      placeholder="Status subskrypcji"
    />
    <button type="submit">Dodaj</button>
  </form>
</div>
<div class="content">
  <form data-form-type="display">
    <button type="submit">Wyświetl</button>
    <ul id="users"></ul>
  </form>
</div>
<div class="content">
  <form data-form-type="update">
    <input type="text" name="id" placeholder="ID klienta" />
    <input type="text" name="name" placeholder="Imię" />
    <input type="email" name="email" placeholder="E-mail" />
    <input
      type="text"
      name="status"
      placeholder="Status subskrypcji"
    />
    <button type="submit">Aktualizuj</button>
  </form>
</div>
<div class="content">
  <form data-form-type="delete">
    <input type="text" name="id" placeholder="ID klienta" />
    <button type="submit">Usuń</button>
  </form>
</div>
<div class="content">
  <form data-form-type="download">
    <button type="submit">Pobierz</button>
    <ul id="emails"></ul>
  </form>
</div>

JavaScript

const forms = document.querySelectorAll("form");

// 抽离重复的响应处理逻辑
async function handleFormSubmit(form) {
  const formType = form.dataset.formType || null;
  const formData = new FormData(form);
  formData.append("formType", formType);

  try {
    const response = await fetch(`http://localhost:3000/${formType}`, {
      method: "POST",
      body: formData,
    });

    if (response.ok) {
      const responseData = await response.json();
      console.log(responseData);

      switch(formType) {
        case "download":
          const emailsBox = document.getElementById("emails");
          emailsBox.innerHTML = "";
          responseData.emails.forEach((email) => {
            const emailElement = document.createElement("li");
            emailElement.textContent = email;
            emailsBox.appendChild(emailElement);
          });
          break;
        case "display":
          const usersBox = document.getElementById("users");
          usersBox.innerHTML = "";
          responseData.users.forEach((user) => {
            const userElement = document.createElement("li");
            let paragraph = document.createElement("p");
            paragraph.textContent = "ID: " + user.id;
            userElement.appendChild(paragraph);

            paragraph = document.createElement("p");
            paragraph.textContent = "Name: " + user.name;
            userElement.appendChild(paragraph);

            paragraph = document.createElement("p");
            paragraph.textContent = "Email: " + user.email;
            userElement.appendChild(paragraph);

            paragraph = document.createElement("p");
            paragraph.textContent = "Status: " + user.status;
            userElement.appendChild(paragraph);

            usersBox.appendChild(userElement);
          });
          break;
        case "update":
          console.log("zakutalizowano");
          break;
        case "add":
          console.log("dodano");
          break;
        case "delete":
          console.log("usunięto");
          break;
      }
    } else {
      console.error("Nie udało się wysłać danych");
    }
  } catch (error) {
    console.error("Błąd:", error);
  }
}

forms.forEach((form) => {
  form.addEventListener("submit", async (e) => {
    e.preventDefault(); // 优先阻止默认行为
    await handleFormSubmit(form);
  });
});

关键说明 #

• 仅保留表单的submit事件监听，确保所有提交场景都能被捕获并阻止默认刷新。
• 抽离重复逻辑提升代码可维护性，避免重复代码带来的潜在错误。
• e.preventDefault()放在事件处理函数最开头，确保无论后续代码是否执行，都能阻止页面刷新。

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