Comment OBTENIR du HTML à partir de l'API et l'afficher dans le DOM à l'aide de HMPL.js (récupérer) ?

Bonjour ! Dans cet article, j'aimerais expliquer comment OBTENIR du HTML à partir de l'API et l'afficher dans le DOM à l'aide de HMPL.js.

Cette méthode convient à n'importe quelle API, car Ce module est basé sur l'API Fetch et copie presque entièrement le travail avec la solution vanille.

Disons que si nous prenons un itinéraire qui renvoie du HTML en réponse :

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

<span>123</span>

Et, disons, qu'il y a une tâche dans un div avec l'identifiant "wrapper" pour afficher ce code HTML. Pour cela, vous pouvez connecter le module hmpl via la balise script et écrire le code suivant :

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

Dans ce code, grâce au balisage hmpl, vous pouvez générer un nœud DOM pouvant être affiché en HTML. Il convient de considérer que ce nœud sera mis à jour automatiquement pendant le processus de demande d'API.

Si vous devez ajouter un indicateur de demande, vous pouvez légèrement étendre le code existant :

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

Dans cet exemple, l'indicateur se déclenchera lorsque la requête sera envoyée, mais la réponse de l'API n'est pas encore arrivée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!