如何使用 HMPL.js (fetch) 從 API 取得 HTML 並在 DOM 中顯示？

您好！在這篇文章中我想談談如何從 API 取得 HTML 並使用 HMPL.js 在 DOM 中顯示。

此方法適用於任何 api，因為此模組基於 Fetch API，幾乎完全複製了普通解決方案的工作。

假設我們採用傳回 HTML 回應的路由：

API 路由 - http://localhost:8000/api/test

<span>123</span>

並且，假設在 id 為「wrapper」的 div 中有一個任務來顯示此 HTML。為此，您可以透過 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 的回應尚未到達時，該指標將被觸發。

以上是如何使用 HMPL.js (fetch) 從 API 取得 HTML 並在 DOM 中顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！