Route.post의 노드 익스프레스에서 페이지를 렌더링하는 방법은 무엇입니까?

Question

API에서 100개의 밈을 가져오는 페이지가 있습니다. 밈을 테이블에 표시하고, 각 밈에는 사용자를 밈의 세부정보 페이지로 안내하는 세부정보 버튼이 있습니다. meme 경로에 대한 POST 요청을 수행하고 meme 세부정보 페이지를 렌더링해야 합니다. 게시물 요청이 성공했지만 밈 페이지가 router.post의 render()에서 렌더링되지 않습니다.

Meme.js

으아악

memes.egs 버튼:

으아악

MemeDetails.js:

으아악

터미널의 응답은 POST /meme 200 10.677 ms - 2703이지만 페이지에는 아무것도 렌더링되지 않습니다.

Answer 1

먼저 "하지만 페이지에는 아무것도 렌더링되지 않습니다"라고 언급하고 싶습니다.

페이지를 자동 렌더링하지 않습니다. MDN Webdocs에서 fetch() 用于使用 AJAX 调用从网络获取资源。您获取的资源将存储在 response 변수에서 얻은 데이터를 수동으로 처리해야 한다고 지적했기 때문입니다(DOM insideText를 조작하거나 window를 사용하여 다른 페이지로 리디렉션). href.location )

그러나 POST 요청은 일반적으로 서버에서 데이터를 생성/수정하는 데 사용됩니다(HTTP 메서드를 읽어보세요). 페이지를 렌더링하거나 다른 페이지로 이동하기 위해 POST 요청을 사용하고 계십니다. GET은 서버에서 데이터를 요청하는 데 사용되는 HTTP 메서드입니다.

handleDetailsClick的方式。您可以使用 或者简单地修改 元素的 onclick 行为，使其具有 window.location.href=".../meme?id= "handleDetailsClick 처리 방식을 바꾸는 것이 좋을 것 같습니다. 전체 meme 데이터를 전달하는 대신

또는

window.location.href=".../meme?id= 요소의 onclick 동작을 수정하세요. 아이디 %>"

그런 다음 Express 측에서 POST 경로를 GET으로 수정하고 쿼리 문자열에서 특정 ID를 가져올 수 있으므로 데이터베이스 등에서 검색하고

res.render()를 사용하여 페이지를 렌더링할 수 있습니다.

아래 예.

으아악 도움이 되길 바랍니다

res.render () 要渲染 html 页面，您只需使用 res.JSON()업데이트

배포 요구 사항에 대해 언급했듯이

res.render()를 사용하는 대신 위의 POST 라우팅 코드를 약간 수정할 수 있습니다(배포 요구 사항에 따라 ID만 사용하거나 전체 데이터를 사용할 수 있음). HTML 페이지를 렌더링하려면

res.JSON()을 사용하고 JS를 사용하여

JSON

응답을 활용하세요.

Meme.js

으아악

meme.ejs(선택한 세부 사항에 대한 밈 컨테이너가 될 요소를 배치할 수 있습니다)

으아악

그럼 MemeDetails.js🎜 🎜🎜 🎜 으아악 🎜