API から HTML を取得し、HMPL.js (フェッチ) を使用して DOM に表示するにはどうすればよいですか?-jsチュートリアル-php.cn

API から HTML を取得し、HMPL.js (フェッチ) を使用して DOM に表示するにはどうすればよいですか?

王林

リリース： 2024-07-22 21:14:03

オリジナル

628 人が閲覧しました

How to GET HTML from API and Display In DOM using HMPL.js (fetch)?

こんにちは！この記事では、HMPL.js を使用して API から HTML を取得し、DOM に表示する方法について説明したいと思います。

このモジュールは Fetch API に基づいており、バニラソリューションの動作をほぼ完全にコピーするため、このメソッドはあらゆる API に適しています。

応答として HTML を返すルートを取るとします。

API ルート - http://localhost:8000/api/test

<span>123</span>

ログイン後にコピー

そして、この HTML を表示するための ID「wrapper」を持つ div 内にタスクがあるとしましょう。これを行うには、script タグを介して hmpl モジュールに接続し、次のコードを記述します:

<div id="wrapper"></div>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
<script>
  const templateFn = hmpl.compile(
    `<div>
       { 
         {
           "src":"http://localhost:8000/api/test" 
         } 
       }
    </div>`
  );

  const wrapper = document.getElementById("wrapper");

  const obj = templateFn();

  wrapper.appendChild(obj.response);
</script>

ログイン後にコピー

このコードでは、hmpl マークアップのおかげで、HTML で表示できる DOM ノードを生成できます。このノードは API リクエストのプロセス中に自動的に更新されることを考慮する価値があります。

リクエストインジケーターを追加する必要がある場合は、既存のコードを少し拡張できます。

<div id="wrapper"></div>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
<script>
  const templateFn = hmpl.compile(
    `<div>
       { 
         {
           "src":"http://localhost:8000/api/test",
           "on": {
              "trigger": "loading",
              "content": "<div>Loading...</div>",
           } 
         } 
       }
    </div>`
  );

  const wrapper = document.getElementById("wrapper");

  const obj = templateFn();

  wrapper.appendChild(obj.response);
</script>

ログイン後にコピー

この例では、リクエストが送信されたときにインジケーターがトリガーされますが、API からの応答はまだ到着していません。

以上がAPI から HTML を取得し、HMPL.js (フェッチ) を使用して DOM に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。