jQuery / Methode / .load() - HTML in ein Element laden

jQuerys .load(url, complete) lädt HTML asynchron und ersetzt den inneren Inhalt ausgewählter Elemente. Ein Leerzeichen mit Selektor wie .load("fragment.html #card", complete) fügt nur einen Ausschnitt ein. Verarbeiten Sie Ergebnisse im Rückruf statt sie bereits in der nächsten Zeile vorauszusetzen.

Ziel, Rückgabe und Voraussetzungen

Das Ziel der .load()-API ist ein vorhandener Container. Sein äußeres Element bleibt, sein Inhalt ändert sich. Ohne passende Ziele wird keine Anfrage gesendet. Die Rückgabe ist das ursprüngliche jQuery-Objekt, kein jqXHR und kein fertiger HTML-String.

Nutzen Sie die vollständige Datei aus dem offiziellen Download; Slim enthält kein Ajax. Ajax tauscht Daten aus, ohne die ganze Seite neu zu öffnen. HTML-.load(url) unterscheidet sich von der alten Kurzform für Bildladeereignisse.

Erstellen Sie die zwei Dateien in einem neuen Übungsordner und öffnen Sie sie über HTTP statt file://. Die Same-Origin-Regel vergleicht Schema, Host und Port. Beide Dateien kommen hier von einem Server. Vermischen Sie nicht localhost mit 127.0.0.1 oder unterschiedliche Ports.

Vollständiges Beispiel mit zwei Dateien

Speichern Sie zuerst fragment.html in UTF-8. Karte und äußerer Absatz sind absichtlich getrennt. Das harmlose Skript zählt nur Ausführungen; ersetzen Sie es nicht durch fremden beliebigen Code.

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

Speichern Sie load-demo.html im selben Ordner. #panel existiert vor der Anfrage. Bedienelemente bleiben bis zum Abschluss deaktiviert, um doppelte Aktionen und Reset während Anfragen zu vermeiden. this im Rückruf bezeichnet jedes empfangende Ziel.

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

Anfangsausgabe ohne Anfrage:

Ready

Öffnen Sie mit installiertem Python 3 ein Terminal im Übungsordner und führen Sie den Befehl aus. Fehlt python, prüfen Sie Installation und Pfad. Ist 8000 belegt, verwenden Sie etwa 8001 und ändern Sie auch die Browseradresse.

python -m http.server 8000 --bind 127.0.0.1

Öffnen Sie bei laufendem Server http://127.0.0.1:8000/load-demo.html. Das jQuery Content Delivery Network (CDN) benötigt zusätzlich Internet. Beenden Sie den Server danach im Terminal mit Strg+C. Geprüft wurde mit 3.7.1, 4.0.0, Windows Edge und Python http.server; nur der Testport wurde auf einen freien Port geändert.

Ausschnitt, Ganzes und Fehler vergleichen

1. Load #card only fügt Local fragment samt Karte ein. status=success; HTTP=200, script runs=0. Der äußere Absatz fehlt.
2. Count a delegated click erhöht delegated clicks über einen einmal auf #panel registrierten Handler.
3. Load whole fragment enthält auch den äußeren Absatz und erhöht script runs um eins, entsprechend dem unten erläuterten Verhalten.
4. Request missing file ergibt status=error; HTTP=404. Fester Fehlertext wird mit .text() statt Antwort-HTML angezeigt.
5. Load #card only funktioniert danach erneut. Reset stellt Inhalt und Zähler zurück. Neues Laden registriert keine weiteren delegierten Handler.

Das Leerzeichen in "fragment.html #card" beginnt einen clientseitigen Selektor, anders als der URL-Hash "fragment.html#card". #card samt Kindern gelangt in #panel. Trotzdem wird zuerst das ganze HTML geladen; die Übertragungsmenge sinkt dadurch nicht automatisch. Ohne Selektortreffer kann der Inhalt trotz erfolgreichem HTTP leer sein.

Skripte, Ereignisse und GET gegenüber POST

Laut API können Skripte ohne Selektor bei der HTML-Verarbeitung laufen; mit Selektorsuffix werden Skriptblöcke vor dem Einfügen entfernt. Die Buttons prüfen das durch Zähler. Dies bereinigt nicht jedes gefährliche HTML. Verwenden Sie vertrauenswürdiges HTML und ausdrückliche Initialisierung im Rückruf oder einer Funktion.

Direkte Handler alter Kinder wandern nicht automatisch auf neue. Das Beispiel delegiert vom erhaltenen #panel. Wiederholte gleiche IDs über mehrere Ziele erzeugen Duplikate; prüfen Sie Vorlagen. complete läuft je Ziel, sodass globale Arbeit bei mehreren Zielen nicht mehrfach passieren sollte.

Ein Datenobjekt bewirkt POST, andernfalls wird GET verwendet. Dieser statische Python-Server dient dem HTML-GET-Beispiel, nicht einem POST-Backend. Prüfen Sie vor Objektargumenten den Server. HTML einzufügen unterscheidet sich außerdem von JSON-Verarbeitung.

Zu frühe Zugriffe oder fehlende Anfragen

Prüfen Sie Anfrage, Status und Antwort im Network-Bereich. #panel direkt nach load kann alten Inhalt zeigen; Arbeiten nach Einfügung gehören in complete. Relative URLs beziehen sich auf die aktuelle Seite, daher Ordner und Serveradresse prüfen.

Ohne Anfrage prüfen Sie Ziel-.length, vollständige jQuery-Datei und Skriptfehler. Andere Origins können passende serverseitige Freigaben erfordern; deaktivieren Sie nicht den Browserschutz. Für Abbruch, Timeout und genaue Steuerung nutzen Sie jQuery.ajax() mit Anfrageobjekt als Rückgabe. Erwarten Sie kein .abort() auf der load-Rückgabe.