发送 POST 请求到 express 路由 - 收到表单数据后，不会触发 res.render

Question

我正在尝试创建一个简单的应用程序，在其中上传图片，并将该图片绘制在 html 画布上，以便我可以进行一些简单的像素操作。

现在我有 GET 方法来根渲染一个带有 fileReader 和画布的 EJS 模板。 通过脚本标签在 EJS 文件底部附加代码，我将上传的图像绘制到画布上，以便读取每个像素的 rgb 值。

然后我尝试将这些 rgb 值发送到应用程序中的 POST 路由（通过 fetch），但它没有按预期工作。

app.post("/", (req, res)=>{
    console.log("inside post");
    console.log(req.body);
    res.render("test", {result: req.body});
    console.log("after res.render");
});

所有三个控制台日志都在终端中正确打印，包括请求正文，但未呈现测试模板。它只是停留在与应用启动时相同的“索引”视图中。

有人可以告诉我为什么会发生这种情况吗？我还在 ejs 模板的脚本标签中包含了控制台日志，这些日志只显示在浏览器中，而不是在我启动 express 应用程序的终端中。如何在 post 方法中渲染视图？

Answer 1

首先

如果您使用 Fetch API 或 XHR 之类的 AJAX，浏览器将不会呈现 test 页面。
因为它是异步的，你可以看到Ajax in MDN web docs。
您需要使用带有以下代码的表单发布。

<form action="/" method="post">
    <button type="submit">go to another page</button>
</form>

但是，如果您使用表单发布，您的页面可能是“index.ejs”将被替换为“test.ejs”。

换句话说，
浏览器使用表单 POST 请求的响应来加载新页面。
但是浏览器将AJAX请求的响应传递给回调并在js中触发回调。
浏览器以不同的方式处理这两种类型的请求（Form Post 和 AJAX POST）。
共同点，两者都是向服务器发送数据。

因此，在您的情况下，res.render 已成功触发。
让我给你看一个例子。这是我的服务器代码。

const express = require('express')
const app = express()

app.set("view engine", "ejs")

app.get("/", (req, res, next) => {
    res.render("test")
})

app.post("/test", (req, res, next) => {
    res.render("other-test")
})

app.listen(3000)

<!-- test.ejs -->
<h1>this is test pages.</h1>

<!-- other-test.ejs -->
<h1>this is other test pages.</h1>

当我输入 url http://localhost:300 时，浏览器会显示这个。

然后我在 chrome 中打开控制台并输入以下代码。

fetch("/test", {
  method: 'POST', // or 'PUT'
  body: JSON.stringify({}), // data can be `string` or {object}!
}).then(res => {console.log("trigger response")})

然后在 chrome 中转到网络选项卡，您将看到请求。
在这里，这个请求触发了 express 方法。

但是，反应是什么？

嗯，它是一个 html。 这意味着res.render("other-test") 被正确触发。
您会发现控制台输出显示“触发响应”，这是在我的 fetch 中触发的回调。
而且，页面仍然停留在“test.ejs”中。

接下来，我在 test.ejs 中添加以下代码

<form action="/test" method="post">
    <button type="submit">Go to other page</button>
</form>

页面会是这样的。

点击后，你会发现浏览器显示“other-test”的内容。

这是form post和ajax post的区别。

第二

您将脚本标签放入 ejs 模板中。
Express 将使用 ejs 引擎将您的 ejs 模板渲染为 html 页面。
变成html页面后，这意味着所有脚本都在浏览器中运行，而不是你的nodejs终端。