jQuery.ajax()で取得したHTMLの一部を抜き出す方法

jQuery.ajax()で取得したHTMLの一部を抜き出す方法

Posted at December 5,2013 1:23 AM
Tag:[Ajax, jQuery]

jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。

1.問題点

次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $.ajax({
        url: 'http://user-domain/foo.html',
        dataType: 'html',
    })
    .done(function(data) {
        $("#bar").html(data);
    })
    .fail(function(data) {
        // ...
    });
</script>
<div id="bar"></div>

が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述すればよいか分かりません。

2.取得したHTMLの一部を抜き出す(その1)

たとえば、取得するページ「http://user-domain/foo.html」の内容が以下のような内容とします。

<!doctype html>
<html>
  <head>
  <meta charset="utf-8" />
  <title>hoge</title>
  </head>
  <body>
    <div>
      <p id="hoge">hoge</p>
      <p id="fuga">fuga</p>
    </div>
  </body>
</html>

この中から

hoge

というテキストだけを抜き出したい場合、done()メソッド内で引数のdataを「$(data)」という風に指定し、さらにfind()を使えば取得できるようです。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $.ajax({
        url: 'http://user-domain/foo.html',
        type: 'GET',
        dataType: 'html',
    })
    .done(function(data) {
        $(data).find('p').each(function(){
            if ($(this).is('#hoge')) {
                $("#bar").html($(this).text());
                return false;
            }
        });
    })
    .fail(function( data ) {
        // ...
    });
});
</script>
<div id="bar"></div>

idセレクタで指定する場合、次のように記述してもOKです。

    .done(function(data) {
        $("#bar").html($(data).find('#hoge').text());
    })

3.取得したHTMLの一部を抜き出す(その2)

セレクタのコンテキストとして$(data)またはdataを与えても抜き出せるようです。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $.ajax({
        url: 'http://user-domain/foo.html',
        type: 'GET',
        dataType: 'html',
    })
    .done(function(data) {
        $("#bar").html($('#hoge', $(data)).html());
    })
    .fail(function( data ) {
        // ...
    });
});
</script>
<div id="bar"></div>

または

    .done(function(data) {
        $("#bar").html($('#hoge', data).html());
    })

4.注意事項

サンプルを作って試したところ、期待する動作になる場合とそうでない場合がありました。

たとえばサンプルのHTMLにあるdiv要素をfind()で指定しても正常にパースできないようです。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)