最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • 如何使用 HMPLjs (fetch) 从 API 获取 HTML 并在 DOM 中显示?

    如何使用 hmpljs (fetch) 从 api 获取 html 并在 dom 中显示?

    你好!在这篇文章中我想谈谈如何使用 hmpl.js 从 api 获取 html 并在 dom 中显示。

    此方法适用于任何 api,因为此模块基于 fetch api,几乎完全复制了 vanilla 解决方案的工作。

    假设我们采用返回 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" 
             } 
           }
        `
      );
    
      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...",
               } 
             } 
           }
        `
      );
    
      const wrapper = document.getElementById("wrapper");
    
      const obj = templateFn();
    
      wrapper.appendChild(obj.response);
    </script>

    在本例中,当请求发送后,但 api 的响应尚未到达时,该指标就会被触发。

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » 如何使用 HMPLjs (fetch) 从 API 获取 HTML 并在 DOM 中显示?
    • 7会员总数(位)
    • 25846资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 293稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情