express.jsハンドルバーを使用してすべてのページをリフレッシュせずにUIを更新する方法

Question

初めて使用するのはexpress.jsとハンドルバーです。 私はこのフィールドをオートコンプリートする必要があります：<input type="text" id="myInput" autocomplete="on" placeholder="Search here...">。誰もがこのテキストに数字を付けると、ページ内のコンテンツを更新せずにPOSTを行い、GET後に行う必要があります。問題は、私がGETをするとき、ハンドルバーすべてのページをリフレッシュすることです。これは私が使用するコマンドです：

res.render('home',{ items:typeOfCategory}); 

、これはHBSの構造である：

{{#if items}} 
<ul> 
{{#each items}} 
<li>{{this.title}}</li> 

{{/each}} 
</ul> 
{{/if}} 

私の質問は：すべてのページのリフレッシュを回避する方法？ ありがとう

Answer 1

ここでの問題は、毎回ブラウザに新しいリソースをリクエストさせてしまうことです。これはあなたのテンプレートをトリガーし、毎回新しいページを提供しています。

JSONを返す高速エンドポイントを作成し、AJAX（jQueryにある）または同様のライブラリを使用してそのエンドポイントにリクエストを送信することができます。 JSON形式のデータを返すことができます（res.json({})）。フロントエンドはその応答を解釈し、DOMに表示する方法を決定することができます。

この種の部分的な更新とは、フロントエンドJSがJSONを返すプログラム側のエンドポイントに沿っている必要があるところです。これはVuejsやAngularのような大きなフロントエンドフレームワークが繁栄している場所ですが、 jQueryがサーバーへのHTTP呼び出しを行い、JSONをフロントエンドに返すようにします