你好！在这篇文章中我想谈谈如何使用 hmpl.js 从 api 获取 html 并在 dom 中显示。
此方法适用于任何 api，因为此模块基于 fetch api，几乎完全复制了 vanilla 解决方案的工作。
假设我们采用返回 html 响应的路由：
api 路由 – http://localhost:8000/api/test
123
并且，比方说，在 id 为“wrapper”的 div 中有一个任务来显示此 html。为此，您可以通过 script 标签连接 hmpl 模块并编写以下代码：
Bolt.new
Bolt.new是一个免费的AI全栈开发工具
466 查看详情 
const templatefn = hmpl.compile( `{ { "src":"http://localhost:8000/api/test" } }` ); const wrapper = document.getelementbyid("wrapper"); const obj = templatefn(); wrapper.appendchild(obj.response);
在这段代码中，借助 hmpl 标记，您可以生成可以在 html 中显示的 dom 节点。值得考虑的是，该节点将在 api 请求过程中自动更新。
立即学习“前端免费学习笔记（深入）”；
如果需要添加请求指示器，可以稍微扩展现有代码：
const templateFn = hmpl.compile( `{ { "src":"http://localhost:8000/api/test", "on": { "trigger": "loading", "content": "` ); const wrapper = document.getElementById("wrapper"); const obj = templateFn(); wrapper.appendChild(obj.response);Loading...", } } }
在本例中，当请求发送后，但 api 的响应尚未到达时，该指标就会被触发。
以上就是如何使用 HMPLjs (fetch) 从 API 获取 HTML 并在 DOM 中显示？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/899726.html
微信扫一扫 
支付宝扫一扫 
