Secrets to Sélection des éléments retournés à partir des chaînes de réponse JQuery Ajax

Cet article montre comment réutiliser efficacement le contenu dans une application Web en tirant parti du moteur de sélection de JQuery pour extraire des fragments HTML spécifiques à partir de pages statiques via des appels AJAX. Cette technique est particulièrement utile lorsqu'il s'agit de systèmes hérités ou de contenu statique où la préparation des données côté serveur n'est pas possible.

Concepts clés:

Le moteur de sélection de JQuery offre une flexibilité, travaillant avec les éléments DOM et les chaînes de balisage en mémoire. Lors de la récupération d'une page HTML statique à l'aide d'Ajax, le balisage de la page entière (y compris l'élément doctype et root html) est renvoyé. Pour rendre cela sélectionnable avec jQuery, il doit être enveloppé dans un seul élément racine (par exemple, A <div>). La méthode jQuery <code>find() permet ensuite une extraction précise du fragment HTML souhaité.

Scénario:

Imaginez une application avec une page "Films" répertoriant les films dans diverses catégories (figure 1). La page d'accueil, cependant, n'a besoin que d'afficher un sous-ensemble de ces films, par exemple, seuls les films d'action (figure 2).

Implémentation:

La page "Films" (Listing 1) regroupe logiquement les catégories de films dans <section></section> Elements, chacun avec un ID unique.

Listing 1: Page de films (films.html)

<code class="language-html"><h1>Movies</h1>

<section id="action-container">
  <h2>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>Drama</h2>
  <ul>
    <li>A Few Good Men</li>
    <li>The Shawshank Redemption</li>
    <li>Legends of the Fall</li>
  </ul>
</section></code>

La page d'accueil (Listing 2) utilise jQuery pour récupérer movies.html via Ajax. La réponse est enveloppée dans une <div>, et la méthode <code>find() extrait la section de film "Action".

Listing 2: page d'accueil (index.html)

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

Une feuille de style simple (Listing 3) fournit un style de base.

Listing 3: feuille de style (styles.css)

<code class="language-css">body, html {
  padding: 4px;
  margin: 0px;
}

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

Conclusion:

Cette approche, bien que NICHE, s'avère précieuse lors de la création sélective du contenu à partir de pages existantes sans modifications côté serveur. La clé est enveloppe la réponse AJAX dans un seul élément racine et en utilisant JQuery's find() pour l'extraction de contenu ciblée.

Questions fréquemment posées:

(La section FAQ d'origine est conservée, mais reformulée pour plus de clarté et de concision.)

• jQuery Ajax Response Strings: Ce sont des données (souvent HTML) renvoyées par le serveur après une demande AJAX. JQuery's $.ajax() gère la demande et le traitement de la réponse.

• Sélection d'éléments à partir des réponses AJAX: Utilisez $(responseString) pour créer un objet jQuery à partir de la réponse, puis utilisez des méthodes comme .find() pour sélectionner des éléments de cet objet.

• Réponses complètes de la page HTML: Une réponse complète de la page HTML à une demande de post indique généralement une erreur côté serveur. Vérifiez le code d'état (devrait être de 200 pour réussir) et le texte de réponse pour le débogage.

• Récupération des portions HTML avec jQuery: La méthode .load() est efficace pour charger des sections spécifiques d'un document HTML. Utilisez un sélecteur après un espace dans l'URL (par exemple, $(‘#result’).load(‘ajax/test.html #container’)).

• Convertir des objets jQuery en chaînes: La méthode .html() convertit un objet jQuery représentant des éléments HTML en une chaîne contenant leur contenu HTML.