jQuery / Méthode / .load() - Charger du HTML dans un élément

Dans jQuery, .load(url, complete) récupère du HTML de façon asynchrone et remplace le contenu intérieur des cibles. Ajoutez un espace et un sélecteur, comme .load("fragment.html #card", complete), pour n’insérer qu’une partie. Traitez le résultat dans le rappel, sans supposer qu’il est disponible à la ligne suivante.

Cibles, retour et préparation

La cible de l’API .load() est un conteneur existant. L’extérieur reste et l’intérieur change. Une sélection vide n’envoie aucune requête. Le retour est l’objet jQuery initial, pas un jqXHR ni la chaîne HTML reçue.

Utilisez le fichier complet du téléchargement officiel : slim exclut Ajax. Ajax communique sans rouvrir toute la page. .load(url) pour HTML diffère de l’ancienne forme courte d’événement de chargement d’image.

Créez deux fichiers dans un nouveau dossier d’exercice. Ouvrez-les par HTTP plutôt que file://. La politique de même origine compare schéma, hôte et port : les deux viennent ici du même serveur. Ne mélangez pas localhost, 127.0.0.1 ou des ports différents.

Exemple complet avec deux fichiers

Enregistrez d’abord fragment.html en UTF-8. La carte et un paragraphe extérieur sont distincts. Le script inoffensif compte seulement ses exécutions ; ne le remplacez pas par du code externe arbitraire.

<section id="card">
  <h2>Local fragment</h2>
  <p>This card came from fragment.html.</p>
  <button type="button" class="fragment-action">Count a delegated click</button>
</section>
<p id="outside">Outside the selected card</p>
<script>window.fragmentRuns = (window.fragmentRuns || 0) + 1;</script>

Enregistrez load-demo.html dans le même dossier. #panel existe avant la requête. Les commandes sont désactivées jusqu’à la fin pour éviter actions en double et réinitialisation pendant la requête. this dans complete désigne chaque cible réceptrice.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Load local HTML into a target</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button { font: inherit; margin: 4px; max-width: 100%; }
    #panel { padding: 12px; border: 1px solid teal; min-height: 60px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Load a complete response or selected fragment</h1>
  <button type="button" id="selected">Load #card only</button>
  <button type="button" id="whole">Load whole fragment</button>
  <button type="button" id="error">Request missing file</button>
  <button type="button" id="reset">Reset</button>
  <div id="panel">Initial content</div>
  <p id="clicks">delegated clicks=0</p>
  <pre id="status" aria-live="polite">Ready</pre>
  <script>
    $(function () {
      let busy = false, clicks = 0;
      window.fragmentRuns = 0;
      function load(url) {
        if (busy) return;
        busy = true;
        $("#selected, #whole, #error, #reset").prop("disabled", true);
        $("#status").text("Loading...");
        $("#panel").load(url, function (response, textStatus, xhr) {
          if (textStatus === "error") $(this).text("Load failed; try again.");
          $("#status").text(`status=${textStatus}; HTTP=${xhr.status}\nscript runs=${window.fragmentRuns}`);
          busy = false;
          $("#selected, #whole, #error, #reset").prop("disabled", false);
        });
      }
      $("#selected").on("click", function () { load("fragment.html #card"); });
      $("#whole").on("click", function () { load("fragment.html"); });
      $("#error").on("click", function () { load("missing-fragment.html"); });
      $("#panel").on("click.loadLesson", ".fragment-action", function () { clicks++; $("#clicks").text(`delegated clicks=${clicks}`); });
      $("#reset").on("click", function () {
        $("#panel").text("Initial content"); window.fragmentRuns = 0; clicks = 0;
        $("#clicks").text("delegated clicks=0"); $("#status").text("Ready");
      });
    });
  </script>
</body>
</html>

Sortie initiale avant toute requête :

Ready

Avec Python 3 installé, ouvrez un terminal dans ce dossier et exécutez cette commande. Si python est introuvable, vérifiez installation et chemin. Si 8000 est occupé, choisissez 8001 et adaptez aussi l’adresse du navigateur.

python -m http.server 8000 --bind 127.0.0.1

Gardez le serveur actif et ouvrez http://127.0.0.1:8000/load-demo.html. Internet est aussi nécessaire pour le réseau de diffusion de contenu (CDN) de jQuery. Arrêtez le serveur avec Ctrl+C ensuite. L’exemple a été exécuté avec 3.7.1, 4.0.0, Windows Edge et Python http.server ; seul le port de vérification a été remplacé par un port disponible.

Comparer fragment, réponse entière et échec

1. Load #card only insère Local fragment et la carte. status=success; HTTP=200, script runs=0. Le paragraphe extérieur est absent.
2. Count a delegated click augmente delegated clicks grâce à un gestionnaire inscrit une fois sur #panel.
3. Load whole fragment inclut le paragraphe extérieur et augmente script runs de un, selon le comportement expliqué ci-dessous.
4. Request missing file donne status=error; HTTP=404. Un texte fixe est affiché avec .text(), pas le HTML de la réponse d’erreur.
5. Load #card only permet de réessayer. Reset restaure contenu et compteurs, sans réinscrire le gestionnaire délégué.

L’espace de "fragment.html #card" introduit un sélecteur côté navigateur, différent du fragment d’URL "fragment.html#card". L’élément #card lui-même et ses enfants entrent dans #panel. Tout le HTML est téléchargé avant sélection : le volume transféré n’est pas automatiquement réduit. Une absence de correspondance peut donner un contenu vide malgré HTTP réussi.

Scripts, événements et GET ou POST

L’API précise que les scripts peuvent s’exécuter pendant le traitement HTML sans sélecteur ; un sélecteur ajouté retire les blocs script avant insertion. Les boutons vérifient ce point par un compteur. Cela ne purifie pas tout HTML dangereux. Insérez du HTML fiable et gérez l’initialisation dans complete ou une fonction explicite.

Les gestionnaires directs des anciens enfants ne passent pas automatiquement aux nouveaux. L’exemple délègue depuis #panel conservé. Répéter les mêmes id sur plusieurs cibles crée des doublons : examinez les modèles. complete s’exécute par cible ; évitez de répéter une opération globale.

Des données fournies comme objet entraînent POST ; sinon load utilise GET. Le serveur statique Python sert ici l’exercice HTML GET, pas un traitement POST. Vérifiez le serveur avant d’ajouter l’objet. L’insertion HTML diffère aussi de l’analyse de JSON.

Lecture trop tôt ou requête absente

Examinez requête, statut et réponse dans Network. Lire #panel juste après load peut donner l’ancien contenu ; le travail après insertion appartient au rappel. Les URL relatives dépendent de la page actuelle : vérifiez dossiers et adresse du serveur.

Sans requête, vérifiez .length, la version complète et les erreurs de script. D’autres origines peuvent nécessiter des autorisations serveur adaptées ; ne désactivez pas la sécurité du navigateur. Pour annulation, délai maximal et contrôle précis, utilisez jQuery.ajax() qui renvoie la requête. N’attendez pas .abort() sur le retour de load.