API から 100 個のミームを取得するページがあります。ミームを表に表示し、各ミームにはユーザーをミームの詳細ページに移動する詳細ボタンがあります。ミームルートに対して POST リクエストを実行し、ミームの詳細ページをレンダリングする必要があります。投稿リクエストは成功しましたが、meme ページは router.post の render() からレンダリングされません。
ミーム.js
リーリーmemes.egs ボタン:
リーリーミーム詳細.js：
リーリーターミナルの応答は次のとおりです: POST /meme 200 10.677 ms - 2703 しかし、ページには何も表示されません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
最初に、「しかし、ページには何も表示されません」という点について触れておきたいと思います。
MDN Webdocs には、AJAX 呼び出しを使用してネットワークからリソースを取得するために
ただし、POST リクエストは通常、サーバー上のデータを作成/変更するために使用されます (fetch()が使用されると記載されているため、ページが自動的にレンダリングされることはありません。取得したリソースはresponse変数に保存され、取得したデータを手動で処理する必要があります (DOM insideText を操作するか、たとえばwindow.href.location# を使用して別のページにリダイレクトするかのいずれか) # #）HTTP メソッド をお読みください)。 POST リクエストを使用してページをレンダリングしたり、別のページに移動したりしているようです。 GET は、サーバーからデータをリクエストするために使用される HTTP メソッドです。
handleDetailsClickの処理方法を変更した方がよいと思います。ミーム データ全体を渡す代わりに、
res.render( を使用してページをレンダリングできるようになります。 )" などの HTML 要素を使用して、GET メソッドのクエリ文字列でミーム ID を使用できます。 >または単に "となるようにするonclick 動作。次に、Express 側で、POST ルートを GET に変更し、クエリ文字列で特定の ID を取得できるようにします。これにより、データベースなどから ID を検索し、以下の例のようになります。
リーリー
配布要件について言及したように、
res.render()# # を使用する代わりに、上記の POST ルーティング コードを少し変更できます (配布要件に応じて、ID のみまたはデータ全体を使用できます)。 # HTML ページをレンダリングするには、res.JSON() を使用し、 JS を使用して JSON
応答を利用します。
meme.ejs (選択した詳細のミームコンテナとなる任意の要素を配置できます)ミーム.jsリーリー