如何使用 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中文网其他相关文章！