向快递路线发送 POST 请求 - 收到表单数据后，不会触发 res.render

Question

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

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

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

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 or XHR 一样使用 AJAX，浏览器将不会呈现 test 页面。
因为它是异步的，你可以看到 Ajax in MDN web docs.
您需要使用带有以下代码的表单 post。

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

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

换句话说，
浏览器使用表单 POST 请求的响应来加载新页面。
但是浏览器将AJAX请求的响应传递给回调并在js中触发回调。
浏览器以不同的方式处理这两种类型的请求（表单 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") 被正确触发。
你会发现控制台输出显示“触发响应”，在我的提取中触发了哪个回调。
而且，页面还停留在“test.ejs”。

接下来，我在 test.ejs

中添加以下代码

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

页面会变成这样

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

这是 post 和 ajax post 之间的区别。

第二个

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

向快递路线发送 POST 请求 - 收到表单数据后，不会触发 res.render

sending POST request to express route - after receiving form data, res.render is not triggered

ejs

express

第一个

第二个