Wie bekomme ich HTML von der API und zeige es im DOM mit HMPL.js (Abrufen) an?

Hallo! In diesem Artikel möchte ich darüber sprechen, wie man mithilfe von HMPL.js HTML von der API erhält und im DOM anzeigt.

Diese Methode ist für jede API geeignet, da Dieses Modul basiert auf der Fetch-API und kopiert die Arbeit mit der Vanilla-Lösung fast vollständig.

Nehmen wir an, wir nehmen eine Route, die als Antwort HTML zurückgibt:

API-Route – http://localhost:8000/api/test

<span>123</span>

Und nehmen wir an, es gibt eine Aufgabe in einem Div mit der ID „wrapper“, um diesen HTML-Code anzuzeigen. Dazu können Sie das hmpl-Modul über den Script-Tag verbinden und folgenden Code schreiben:

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

In diesem Code können Sie dank hmpl-Markup einen DOM-Knoten generieren, der in HTML angezeigt werden kann. Es ist zu bedenken, dass dieser Knoten während des API-Anfrageprozesses automatisch aktualisiert wird.

Wenn Sie einen Anforderungsindikator hinzufügen müssen, können Sie den vorhandenen Code leicht erweitern:

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

In diesem Beispiel wird der Indikator ausgelöst, wenn die Anfrage gesendet wird, aber die Antwort von der API noch nicht eingetroffen ist.

Das obige ist der detaillierte Inhalt vonWie bekomme ich HTML von der API und zeige es im DOM mit HMPL.js (Abrufen) an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!