Saya mempunyai halaman yang mendapat 100 meme daripada api. Ia memaparkan meme dalam jadual, dan setiap meme mempunyai butang butiran yang membawa pengguna ke halaman butiran meme. Saya perlu melakukan permintaan POST ke laluan meme dan memberikan halaman butiran meme. Permintaan siaran berjaya, tetapi halaman meme tidak dipaparkan daripada render() dalam router.post.
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;
butang 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);
}
}
Tindak balas dalam terminal ialah: POST /meme 200 10.677 ms - 2703, tetapi tiada apa-apa yang dipaparkan pada halaman.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Mula-mula saya ingin menyebut "tetapi tiada apa yang dipaparkan pada halaman".
Ia tidak akan memaparkan halaman secara automatik, seperti yang ditunjukkan dalam MDN Webdocs bahawa dalam
fetch()用于使用 AJAX 调用从网络获取资源。您获取的资源将存储在responsepembolehubah anda perlu mengendalikan data yang anda dapat secara manual (sama ada memanipulasi DOM insideText atau mengubah hala ke halaman lain, mis. menggunakanwindow. href.lokasi )Walau bagaimanapun, permintaan POST biasanya digunakan untuk mencipta/mengubah suai data pada pelayan (sila baca Kaedah HTTP). Saya nampak anda menggunakan permintaan POST untuk memaparkan halaman/menavigasi ke halaman lain. GET ialah kaedah HTTP yang digunakan untuk meminta data daripada pelayan.
Saya rasa anda lebih baik mengubah cara anda mengendalikan
Atau cuma ubah suai gelagathandleDetailsClick的方式。您可以使用或者简单地修改元素的onclick行为，使其具有window.location.href=".../meme?id= "handleDetailsClick. Daripada menghantar keseluruhan data meme, anda boleh menggunakan elemen HTML sepertionclick elemen
untuk mempunyai window.location.href=".../meme?id= "Kemudian, di sebelah Express, anda boleh mengubah suai laluan POST untuk GET dan mendapatkan ID tertentu dalam rentetan pertanyaan supaya anda boleh mencarinya daripada pangkalan data dan lain-lain dan memaparkan halaman menggunakan
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 }); });Semoga ia membantu anda
Seperti yang anda sebutkan keperluan pengedaran, anda boleh mengubah suai sedikit kod penghalaan POST di atas (anda boleh menggunakan hanya ID atau keseluruhan data, bergantung pada keperluan pengedaran) dan bukannya menggunakanres.render ()要渲染 html 页面，您只需使用res.JSON()Dikemas kinires.render () kepada To render halaman html, anda hanya gunakan
res.JSON() dan manfaatkan responsJSON
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 = ''; } }🎜