Geheimnisse zur Auswahl von Elementen, die von JQuery AJAX -Antwortketten zurückgegeben wurden

Dieser Artikel zeigt, wie Sie Inhalte in einer Webanwendung effizient wiederverwenden können, indem die Auswahl -Engine von JQuery nutzt, um bestimmte HTML -Fragmente aus statischen Seiten über AJAX -Aufrufe zu extrahieren. Diese Technik ist besonders nützlich, wenn es um Legacy-Systeme oder statische Inhalte geht, bei denen die serverseitige Datenvorbereitung nicht möglich ist.

Schlüsselkonzepte:

Die Auswahlmotor von

jQuery bietet Flexibilität und arbeitet sowohl mit DOM-Elementen als auch mit memory-Markup-Saiten zusammen. Beim Abrufen einer statischen HTML -Seite mit AJAX wird das Markup der gesamten Seite (einschließlich des HTML -Elements von DocType und Root) zurückgegeben. Um dies mit JQuery auszuwählen, muss es in ein einzelnes Wurzelelement eingewickelt werden (z. B. A <div>). Die jQuery <code>find() -Methode ermöglicht dann eine präzise Extraktion des gewünschten HTML -Fragments.

Szenario:

Stellen Sie sich eine Anwendung mit einer "Filme" -Seiten -Auflistung von Filmen in verschiedenen Kategorien vor (Abbildung 1). Die Homepage muss jedoch nur eine Teilmenge dieser Filme anzeigen, zum Beispiel nur die Actionfilme (Abbildung 2).

Implementierung:

Die Seite "Filme" (Auflistung 1) gruppiert logischerweise Filmkategorien in <section></section> Elementen mit jeweils eine eindeutige ID.

Listing 1: Filme Seite (films.html)

<h1 id="Movies">Movies</h1>

<section id="action-container">
  <h2 id="Action">Action</h2>
  <ul>
    <li>Die Hard</li>
    <li>The Matrix</li>
    <li>Raiders of the Lost Ark</li>
  </ul>
</section>

<section id="drama-container">
  <h2 id="Drama">Drama</h2>
  <ul>
    <li>A Few Good Men</li>
    <li>The Shawshank Redemption</li>
    <li>Legends of the Fall</li>
  </ul>
</section>

Die Homepage (Listing 2) verwendet JQuery, um movies.html über AJAX abzurufen. Die Antwort ist in ein <div> eingewickelt, und die <code>find() -Methode extrahiert den Film "Action".

Listing 2: Startseite (index.html)

$(function() {
  $.get('movies.html', function(response) {
    var source = $('<div>' + response + '</div>');
    $('#movies').html(source.find('#action-container').html());
  });
});

Ein einfaches Stylesheet (Listing 3) bietet ein grundlegendes Styling.

Listing 3: Style Sheet (styles.css)

body, html {
  padding: 4px;
  margin: 0px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

Schlussfolgerung:

Dieser Ansatz ist zwar Nische, ist zwar als wertvoll, wenn Inhalte selektiv von vorhandenen Seiten ohne serverseitige Änderungen rendern. Der Schlüssel ist darin, die AJAX -Antwort in ein einzelnes Rootelement zu wickeln und die find() für gezielte Inhaltsextraktion zu verwenden.

häufig gestellte Fragen:

(Der ursprüngliche FAQ -Abschnitt wird beibehalten, aber aus Klarheit und Selbstverständlichkeit umformuliert.)

• JQuery AJAX -Antwortzeichenfolgen: Dies sind Daten (häufig HTML), die nach einer AJAX -Anforderung vom Server zurückgegeben werden. JQuery's $.ajax() behandelt die Anfrage und Verarbeitung der Antwort.

• Auswählen von Elementen aus AJAX -Antworten: Verwenden Sie $(responseString), um ein JQuery -Objekt aus der Antwort zu erstellen, und verwenden Sie dann Methoden wie .find(), um Elemente in diesem Objekt auszuwählen.

• Full HTML-Seitenantworten: Eine vollständige HTML-Seitenantwort auf eine Postanforderung gibt normalerweise einen serverseitigen Fehler an. Überprüfen Sie den Statuscode (sollte 200 für den Erfolg sein) und den Antworttext zum Debuggen.

• HTML -Teile mit JQuery abrufen: Die .load() -Methode ist effizient zum Laden bestimmter Abschnitte eines HTML -Dokuments. Verwenden Sie einen Selektor nach einem Raum in der URL (z. B. $(‘#result’).load(‘ajax/test.html #container’)).

• JQuery -Objekte in Zeichenfolgen konvertieren: Die .html() -Methode wandelt ein JQuery -Objekt um, das HTML -Elemente darstellt, in eine Zeichenfolge, die ihren HTML -Inhalt enthält.