我有一个页面可以从 api 获取 100 个模因。它在表格中显示模因，每个模因都有一个详细信息按钮，可将用户带到模因的详细信息页面。我必须对 meme 路由执行 POST 请求并呈现 meme 详细信息页面。 post 请求成功，但 meme 页面未从 router.post 中的 render() 渲染。
Meme.js
var express = require("express");
var router = express.Router();
var bodyParser = require("body-parser");
var jsonParser = bodyParser.json();
var ensureLogIn = require("connect-ensure-login").ensureLoggedIn;
var ensureLoggedIn = ensureLogIn();
router.post("/", ensureLoggedIn, jsonParser, (req, res, next) => {
const meme = req.body.meme;
const user = req.body.user;
try {
res.render("meme", { meme: meme, user: user });
} catch (error) {
console.error(error);
res.status(500).send("Internal Server Error");
}
});
module.exports = router;
memes.egs 按钮：
<tbody>
<% memes.forEach(meme=> { %>
<tr class="meme-row <%= viewedMemeIds.includes(meme.id) ? 'viewed' : '' %>" data-meme-id="<%= meme.id %>">
<td><img src="<%= meme.url %>" alt="<%= meme.name %>"></td>
<td>
<%= meme.name %>
</td>
<% if (user) { %>
<td>
<button class="btn-meme details-button" onclick="handleDetailsClick(<%= JSON.stringify(meme) %>, <%= JSON.stringify(user) %>)">Details</button>
</td>
<% } %>
</tr>
<% }) %>
</tbody>
MemeDetails.js：
async function handleDetailsClick(meme, user) {
try {
// Make a POST request to the meme route with the meme and user data
const response = await fetch("/meme", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ meme, user }),
});
// Handle the response status
if (!response.ok) {
throw new Error("Network response was not ok");
}
} catch (error) {
// Handle any errors
console.error(error);
}
}
终端中的响应是：POST /meme 200 10.677 ms - 2703，但页面上没有任何呈现。
首先我想提一下“但是页面上没有任何内容呈现”。
它永远不会自动渲染页面，因为它在 MDN Webdocs 指出
fetch()用于使用 AJAX 调用从网络获取资源。您获取的资源将存储在response变量中，您需要手动处理获取的数据（无论是操作 DOM insideText 还是重定向到另一个页面，例如使用window.href.location）但是，POST 请求通常用于在服务器上创建/修改数据（请阅读HTTP方法）。我看到您使用 POST 请求来渲染页面/导航到另一个页面。 GET 是 HTTP 方法，用于从服务器请求数据。
我认为您最好更改处理
handleDetailsClick的方式。您可以使用或者简单地修改元素的onclick行为，使其具有window.location.href=".../meme?id= "然后，在 Express 端，您可以将 POST 路由修改为 GET 并获取查询字符串中的特定 ID，以便您可以从数据库等搜索它并使用
res.render() 渲染页面就像下面的例子一样。app.get("/meme", function (req, res) { const memeID = req.query.id; // Fetch the meme details from DB or any other data sources using the specified ID const memeDetails = db.findById(memeID); res.render("pages/meme", { memeDetails }); });希望对你有帮助
已更新
正如您提到的分配要求，您可以稍微修改一下上面的 POST 路由代码（您可以仅使用 ID 或整个数据，具体取决于分配要求），而不是使用
res.render ()要渲染 html 页面，您只需使用res.JSON()并利用 使用 JS 的 JSON 响应。Meme.js
app.post("/meme", function (req, res) { const memeID = req.body.id; // Fetch the meme details from DB or any other data sources using the specified ID const memeDetails = db.findById(memeID); res.json({ success: true, data: { id : memeDetails.id, name: memeDetails.name, url : memeDetails.url, } }) });meme.ejs（您可以放置任何将成为所选详细信息模因容器的元素）
<table> <tbody> <% memes.forEach(meme=> { %> <tr class="meme-row <%= viewedMemeIds.includes(meme.id) ? 'viewed' : '' %>" data-meme-id="<%= meme.id %>"> <td><img src="<%= meme.url %>" alt="<%= meme.name %>"></td> <td> <%= meme.name %> </td> <% if (user) { %> <td> <button class="btn-meme details-button" onclick="handleDetailsClick(<%= meme.id %>)">Details</button> </td> <% } %> </tr> <% }) %> </tbody> </table> <div id="selectedMeme"></div>然后是 MemeDetails.js
async function handleDetailsClick(id) { try { // Make a POST request to the meme route with the meme id const response = await fetch("/meme", { method: "POST", headers: { "Content-Type": "application/json", }, body: { id }, }); // Handle the response status if (!response.ok) { throw new Error("Network response was not ok"); } // Handle the response (convert to JSON and utilize it) const jsonResp = await response.json(); if (!jsonResp.success) { throw new Error("Something is error"); } // put the fetched data to HTML const memeData = jsonResp.data; document.getElementById('selectedMeme').innerHTML = ` <b>Meme name: ${memeData.name}</b> <br />Meme url: <a href="${memeData.url}">Click me</a> `; } catch (error) { // Handle any errors console.error(error); document.getElementById('selectedMeme').innerHTML = ''; } }