如何从route.post渲染节点express中的页面？-PHP中文网问答

我有一个页面可以从 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，但页面上没有任何呈现。

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 }); });

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, } }) });

<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>

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 = ''; } }

全部回复(1)

P粉7187309562023-09-09 16:21:06 1楼

首先我想提一下“但是页面上没有任何内容呈现”。

它永远不会自动渲染页面，因为它在 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() 渲染页面 就像下面的例子一样。

希望对你有帮助

已更新

正如您提到的分配要求，您可以稍微修改一下上面的 POST 路由代码（您可以仅使用 ID 或整个数据，具体取决于分配要求），而不是使用 res.render () 要渲染 html 页面，您只需使用 res.JSON() 并利用使用 JS 的 JSON 响应。

meme.ejs（您可以放置任何将成为所选详细信息模因容器的元素）

然后是 MemeDetails.js

赞 +0

添加回复