Ich habe eine Seite, die 100 Memes von einer API abruft. Es zeigt Memes in einer Tabelle an und jedes Meme verfügt über eine Detailschaltfläche, die den Benutzer zur Detailseite des Memes führt. Ich muss eine POST-Anfrage an die Meme-Route durchführen und die Meme-Detailseite rendern. Die Post-Anfrage ist erfolgreich, aber die Meme-Seite wird nicht von render() in router.post gerendert.
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-Schaltfläche:
<% memes.forEach(meme=> { %> 
<%= meme.name %> <% if (user) { %> <% } %> <% }) %>
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); } }
Die Antwort im Terminal lautet: POST /meme 200 10.677 ms – 2703, aber auf der Seite wird nichts gerendert.
首先我想提一下“但是页面上没有任何内容呈现”。
它永远不会自动渲染页面，因为它在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（您可以放置任何将成为所选详细信息模因容器的元素）
然后是 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 = ` Meme name: ${memeData.name}Meme url: Click me `; } catch (error) { // Handle any errors console.error(error); document.getElementById('selectedMeme').innerHTML = ''; } }