jquery ajax応答文字列から返された要素を選択する秘密

この記事では、jQueryの選択エンジンを活用して、Ajaxコールを介して静的ページから特定のHTMLフラグメントを抽出することにより、Webアプリケーション内のコンテンツを効率的に再利用する方法を示しています。 この手法は、サーバー側のデータ準備が実行不可能なレガシーシステムまたは静的コンテンツを扱う場合に特に役立ちます。

重要な概念：

JQueryの選択エンジンは、DOM要素とメモリ内のマークアップ文字列の両方を使用して、柔軟性を提供します。 AJAXを使用して静的HTMLページを取得すると、ページ全体のマークアップ（DoctypeおよびRoot HTML要素を含む）が返されます。 これをjQueryで選択できるようにするには、単一のルート要素（

など）にラップする必要があります。 jQuery <div>メソッドは、目的のHTMLフラグメントを正確に抽出できるようにします。 <code>find()シナリオ：

さまざまなカテゴリにわたって映画をリストしている「映画」ページのアプリケーションを想像してください（図1）。 ただし、ホームページはこれらの映画のサブセットを表示するだけで、たとえばアクションフィルムのみを表示する必要があります（図2）。

実装：

「映画」ページ（リスト1）は、要素内の映画カテゴリを論理的にグループ化し、それぞれが一意のIDを備えています。

リスト1：ムービーページ（ムービー.html）<section></section>

ホームページ（リスト2）はjQueryを使用して、ajax経由でを取得します。 応答は

に包まれており、

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

メソッドは「アクション」ムービーセクションを抽出します。

movies.htmlリスト2：ホームページ（index.html）<div> <code>find()

シンプルなスタイルシート（リスト3）は、基本的なスタイリングを提供します リスト3：スタイルシート（styles.css）

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

結論：

このアプローチは、ニッチですが、サーバー側の変更なしで既存のページからコンテンツを選択的にレンダリングする場合に価値があることが証明されます。 重要なのは、Ajax応答を単一のルート要素でラッピングし、ターゲットを絞ったコンテンツ抽出にjQueryの

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

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

を使用することです。

よくある質問：

find()（元のFAQセクションは保持されますが、明確さと簡潔さのために言い換えられます。）

jQuery ajax response strings：

これらは、ajaxリクエストの後にサーバーによって返されるデータ（多くの場合HTML）です。 jquery's

は、応答のリクエストと処理を処理します。

ajax応答から要素の選択：$(responseString)を使用して応答からjQueryオブジェクトを作成し、.find()などのメソッドを使用してそのオブジェクト内の要素を選択します。

完全なHTMLページ応答：POSTリクエストに対する完全なHTMLページ応答は、通常サーバー側のエラーを示します。デバッグのステータスコード（成功のために200である必要があります）と応答テキストを確認してください。

jQueryを使用してHTML部分を取得する：

メソッドは、HTMLドキュメントの特定のセクションをロードするのに効率的です。 URL内のスペースの後にセレクターを使用します（例：）。 .load() $(‘#result’).load(‘ajax/test.html #container’)

jQueryオブジェクトを文字列に変換します：

メソッドは、HTML要素を表すjQueryオブジェクトをHTMLコンテンツを含む文字列に変換します。