ノードエクスプレスでroute.postからページをレンダリングするにはどうすればよいですか?

Question

API から 100 個のミームを取得するページがあります。ミームを表に表示し、各ミームにはユーザーをミームの詳細ページに移動する詳細ボタンがあります。ミームルートに対して POST リクエストを実行し、ミームの詳細ページをレンダリングする必要があります。投稿リクエストは成功しましたが、meme ページは router.post の render() からレンダリングされません。

ミーム.js

リーリー

memes.egs ボタン:

リーリー

ミーム詳細.js：

リーリー

ターミナルの応答は次のとおりです: POST /meme 200 10.677 ms - 2703 しかし、ページには何も表示されません。

Answer 1

最初に、「しかし、ページには何も表示されません」という点について触れておきたいと思います。

MDN Webdocs には、AJAX 呼び出しを使用してネットワークからリソースを取得するために fetch() が使用されると記載されているため、ページが自動的にレンダリングされることはありません。取得したリソースは response 変数に保存され、取得したデータを手動で処理する必要があります (DOM insideText を操作するか、たとえば window.href.location# を使用して別のページにリダイレクトするかのいずれか) # #）

ただし、POST リクエストは通常​​、サーバー上のデータを作成/変更するために使用されます (

HTTP メソッド をお読みください)。 POST リクエストを使用してページをレンダリングしたり、別のページに移動したりしているようです。 GET は、サーバーからデータをリクエストするために使用される HTTP メソッドです。

handleDetailsClick

の処理方法を変更した方がよいと思います。ミーム データ全体を渡す代わりに、" などの HTML 要素を使用して、GET メソッドのクエリ文字列でミーム ID を使用できます。 > または単に " となるようにする onclick 動作。 次に、Express 側で、POST ルートを GET に変更し、クエリ文字列で特定の ID を取得できるようにします。これにより、データベースなどから ID を検索し、

res.render( を使用してページをレンダリングできるようになります。 )

以下の例のようになります。

リーリー

お役に立てば幸いです ＃＃＃＃＃＃更新しました＃＃＃＃＃＃

配布要件について言及したように、

res.render()# # を使用する代わりに、上記の POST ルーティング コードを少し変更できます (配布要件に応じて、ID のみまたはデータ全体を使用できます)。 # HTML ページをレンダリングするには、

res.JSON() を使用し、 JS を使用して JSON

応答を利用します。

ミーム.js リーリー

meme.ejs (選択した詳細のミームコンテナとなる任意の要素を配置できます)

リーリー

次に MemeDetails.js

リーリー