HMPL.js(가져오기)를 사용하여 API에서 HTML을 가져오고 DOM에 표시하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

HMPL.js(가져오기)를 사용하여 API에서 HTML을 가져오고 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에 표시하는 방법에 대해 이야기하고 싶습니다.

이 방법은 모든 API에 적합합니다. 왜냐하면 이 모듈은 Fetch API를 기반으로 하고 바닐라 솔루션의 작업을 거의 완전히 복사하기 때문입니다.

응답으로 HTML을 반환하는 경로를 취한다고 가정해 보겠습니다.

API 경로 - http://localhost:8000/api/test

<span>123</span>

로그인 후 복사

이 HTML을 표시하기 위해 ID가 "wrapper"인 div에 작업이 있다고 가정해 보겠습니다. 이를 위해 스크립트 태그를 통해 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(가져오기)를 사용하여 API에서 HTML을 가져오고 DOM에 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!