Bagaimana untuk MENDAPATKAN HTML daripada API dan Paparan Dalam DOM menggunakan HMPL.js (ambil)?

Helo! Dalam artikel ini saya ingin bercakap tentang cara MENDAPATKAN HTML daripada API dan Paparan Dalam DOM menggunakan HMPL.js.

Kaedah ini sesuai untuk sebarang api, kerana Modul ini berdasarkan API Ambil dan hampir menyalin kerja dengan penyelesaian vanila sepenuhnya.

Katakanlah jika kita mengambil laluan yang mengembalikan HTML sebagai tindak balas:

Laluan API - http://localhost:8000/api/test

<span>123</span>

Dan, katakan, terdapat tugas dalam div dengan id "pembungkus" untuk memaparkan HTML ini. Untuk melakukan ini, anda boleh menyambungkan modul hmpl melalui teg skrip dan tulis kod berikut:

<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>

Dalam kod ini, terima kasih kepada penanda hmpl, anda boleh menjana nod DOM yang boleh dipaparkan dalam HTML. Perlu dipertimbangkan bahawa nod ini akan dikemas kini secara automatik semasa proses permintaan API.

Jika anda perlu menambah penunjuk permintaan, anda boleh mengembangkan sedikit kod sedia ada:

<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>

Dalam contoh ini, penunjuk akan dicetuskan apabila permintaan dihantar, tetapi respons daripada API masih belum tiba.

Atas ialah kandungan terperinci Bagaimana untuk MENDAPATKAN HTML daripada API dan Paparan Dalam DOM menggunakan HMPL.js (ambil)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!