event.preventDefault()影响代码的进一步执行

Question

该项目有 3 个 .ejs 页面：index.ejs、loading.ejs 和 result.ejs。首先加载索引，并在其脚本标签中包含以下代码：

document.addEventListener("DOMContentLoaded", function () {
      document.querySelector(".form-button").addEventListener("click", async (event) => {
        event.preventDefault();
        window.location.href = "/loading";
        const response = await fetch("/submit", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: new URLSearchParams(new FormData(document.querySelector(".form"))),
        });
      });
    });

这是node-express服务器中的post请求：

app.post("/submit", async (req, res) => {
  const form_link = req.body.form_link;
  const pythonProcess = await spawn("python", ["./py_scripts/script.py", form_link]);
  pythonProcess.on("exit", () => {
    console.log("Python script finished");
    res.redirect("/result");
  });
});

app.get("/result", (req, res) => {
  res.render("result.ejs");
});

目标是在单击按钮后渲染“loading.ejs”文件，直到 Python 脚本完成执行。 Python 脚本完成后，应该会渲染“result.ejs”。

问题是“loading.ejs”正在加载，但“result.ejs”没有加载，即使在脚本结束后也是如此。这可能是因为（我的猜测）“event.preventDefault()”影响了应该发生的事情。

是否可以让express处理它，而不是在ejs文件的脚本标签中全部解决

我尝试询问 ChatGPT、claude.ai、Gemini，但他们的解决方案似乎都不起作用

Answer 1

这个问题不是由

event.preventDefault();

引起的。实际上，我认为

event.preventDefault();

在此回调函数中对单击事件没有任何影响。

您的代码中还有更多问题：

1. 执行

   window.location.href = "/loading";

   ，页面重新加载。这发生在调用 AJAX（获取）请求之前。
2. 在后端的发布请求处理程序中，您创建一个重定向。但现在，重定向将基于 AJAX 请求的响应。因此，它不会将用户重定向到

   /result

   。
3. 现在，我们还没有看到 HTML 表单（我假设有一个），但我的猜测是该表单仍然使用默认方法 (GET) 对默认操作（相同的 URL）执行请求。 “获取索引页”。浏览器执行两个请求，首先是表单提交（到

   /

   ），然后是到

   /loading

   。

那么，该怎么办呢？我的猜测是你没有那么有经验。因此，我认为您应该删除 AJAX 请求，而只从 HTML 表单中执行普通的 POST 请求。您只需要以下 HTML 表单和您已经完成的后端代码（现在可以重定向到

/result

）。

<form name="form01" method="POST" action="/submit">
  <input type="text" name="form_link">
  <button>Submit</button>
</form>