jQuery / Método / .load() - Cargar HTML en un elemento

En jQuery, .load(url, complete) obtiene HTML de forma asíncrona y sustituye el contenido interior del destino. Añada espacio y selector, como .load("fragment.html #card", complete), para insertar una parte. Procese el resultado en el callback, sin suponer que llegó en la siguiente línea.

Destino, retorno y preparación

El destino de la API de .load() es un contenedor existente. Su exterior permanece y cambia el contenido. Una selección vacía no envía petición. El retorno es el objeto jQuery original, no jqXHR ni la cadena HTML recibida.

Use el archivo completo de la descarga oficial: slim excluye Ajax. Ajax comunica sin abrir de nuevo toda la página. .load(url) para HTML difiere del antiguo atajo del evento de carga de imágenes.

Cree dos archivos en una carpeta nueva de práctica. Ábralos mediante HTTP, no file://. La política del mismo origen compara esquema, host y puerto; ambos usan aquí un servidor. No mezcle localhost, 127.0.0.1 ni puertos distintos.

Ejemplo completo con dos archivos

Guarde primero fragment.html en UTF-8. La tarjeta y el párrafo externo son distintos. El script inocuo solo cuenta ejecuciones; no lo cambie por código externo arbitrario.

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

Guarde load-demo.html en la misma carpeta. #panel existe antes de la petición. Los controles se deshabilitan hasta completar para evitar duplicados o reinicios durante la petición. this en complete identifica cada destino receptor.

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

Salida inicial antes de pedir datos:

Ready

Con Python 3 instalado, abra un terminal en la carpeta y ejecute esto. Si no encuentra python, revise instalación y ruta. Si 8000 está ocupado, use 8001 y cambie también la dirección del navegador.

python -m http.server 8000 --bind 127.0.0.1

Con el servidor activo, abra http://127.0.0.1:8000/load-demo.html. También necesita Internet para la red de distribución de contenido (CDN) de jQuery. Detenga el servidor con Ctrl+C al terminar. Se ejecutó con 3.7.1, 4.0.0, Windows Edge y Python http.server; solo el puerto de verificación se cambió por uno libre.

Comparar fragmento, respuesta completa y error

1. Load #card only inserta Local fragment y su tarjeta. status=success; HTTP=200, script runs=0. No aparece el párrafo externo.
2. Count a delegated click aumenta delegated clicks mediante un controlador registrado una vez en #panel.
3. Load whole fragment incluye el párrafo externo y aumenta script runs en uno, según el comportamiento de scripts explicado abajo.
4. Request missing file produce status=error; HTTP=404. Se muestra texto fijo con .text(), no el HTML de error.
5. Load #card only permite reintentar. Reset restaura contenido y contadores sin volver a registrar la delegación.

El espacio de "fragment.html #card" introduce un selector del cliente, distinto del hash "fragment.html#card". El propio #card y sus hijos entran en #panel. Se descarga primero todo el HTML, por lo que el volumen no baja automáticamente. Sin coincidencias puede quedar vacío pese al éxito HTTP.

Scripts, eventos y GET frente a POST

La API documenta que sin selector pueden ejecutarse scripts al procesar HTML; con selector añadido se retiran los bloques script antes de insertar. Los botones lo comprueban mediante contador. Eso no sanea todo HTML peligroso. Inserte contenido fiable e inicialice en complete o una función explícita.

Los controladores directos de hijos antiguos no pasan automáticamente a los nuevos. El ejemplo delega desde #panel conservado. Repetir los mismos id en varios destinos crea duplicados: revise las plantillas. complete ejecuta por destino, por lo que debe evitar duplicar trabajo global.

Datos en forma de objeto hacen usar POST; en otro caso se usa GET. El servidor estático Python sirve esta práctica HTML GET, no un backend POST. Revise el servidor antes de añadir un objeto. Insertar HTML tampoco equivale a analizar JSON.

Lectura anticipada o petición ausente

Revise petición, estado y respuesta en Network. Leer #panel inmediatamente después de load puede mostrar contenido anterior; las operaciones posteriores van en complete. Las URL relativas dependen de la página actual: revise carpetas y servidor.

Si no hay petición, compruebe .length, archivo completo y errores de script. Otros orígenes pueden necesitar permisos apropiados del servidor; no desactive la seguridad del navegador. Para cancelar, limitar tiempo o controlar más, use jQuery.ajax() que devuelve la petición. No espere .abort() en el retorno de load.