Help us understand the problem. What is going on with this article?

jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する

More than 3 years have passed since last update.

皆様こんにちは。普段はC++やってます。

本題に。

jQueryを用いて単にhtmlを読み込み表示する

これは簡単です。
http://yokano-jp.blogspot.jp/2013/10/jquery-html_10.html
より引用します

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery load() sample</title>
 </head>
 <body>
  <h1>ここに外部 HTML ファイルを表示します</h1>
  <div id="page"></div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="load.js"></script>
 </body>
</html>
external.html
<h2>外部ファイル</h2>
<p>この文章は external.html に記載された外部 HTML の文章です</p>
load.js
$(function() {
 $('#page').load('external.html');
});

簡単ですよね

jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する

ええ、違うんです、やりたいのはそうじゃない。そもそも、そのexternal.html、HTMLとして成立してねーだろ。

じゃあどうするか?こうじゃ。

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="load.js"></script>
    </head>
    <body>
        <h1>ここに外部 HTML ファイルを表示します</h1>
        <div id="page">dst</div>
        <div id="page2">dst</div>
    </body>
</html>
external.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>external-ありきたりとは</title>
</head>
<body>
    <div id="sub">
        <h2>外部ファイル</h2>
        <p>この文章は external.html に記載された外部 HTML の文章です</p>
    </div>
    <div id="sub2">
        <h2>外部ファイル</h2>
        <p>これはありきたりな文章です</p>
    </div>
</body>
</html>
load.js
$(function() {
    $.ajax('external.html', {
        timeout : 1000, // 1000 ms
        datatype:'html'
    }).then(function(data){
        var out_html = $($.parseHTML(data));//parse
        $('#page').empty().append(out_html.filter('#sub')[0].innerHTML);//insert
        $('#page2').empty().append(out_html.filter('#sub2')[0].innerHTML);//insert
        //var sub_html = out_html.filter(function(index) {
        //    return $(this).attr("id") === "sub";
        //})[0].innerHTML;//extract
        //var sub2_html = out_html.filter(function(index) {
        //    return $(this).attr("id") === "sub2";
        //})[0].innerHTML;//extract
        //$('#page').empty().append(sub_html);//insert
        //$('#page2').empty().append(sub2_html);//insert
    },function(jqXHR, textStatus) {
        if(textStatus!=="success") {
            var txt = "<p>textStatus:"+ textStatus + "</p>" +
                "<p>status:"+ jqXHR.status + "</p>" +
                "<p>responseText : </p><div>" + jqXHR.responseText +
                "</div>";
            $('#page').html(txt);
            $('#page2').html(txt);
        }
    });
    // $('#page').load('external.html');
});

jQueryは楽でいいですね・・・。それに引き換え、C++のboost.asioは(ry。

ajaxに渡すパラメータは最低限timeoutdatatypeだけあれば十分です。
ajaxのcallbackはdone()/error()を使う方法もありますが、他言語との共通性の観点からthen()を使います。C++にも標準にfuture/thenとかpromiseとか入るらしいね、やっと。
then()の第1引数が成功した時、第2引数が失敗した時に呼ばれる関数を登録するところです。

thenの第一引数に登録した関数の第一引数dataにはhtmlが文字列として入ってきます。どういうわけかlocalでテストするとXMLDocumet型になるんですが

でそれを取り出すのに

var h = $("#sub", $(data));
var h = $("#sub", $(data)).html();
var h = $("#sub", $($.parseHTML(data)));
var h = $($.parseHTML(data)).find('#sub').text()

とかとかいろいろやりましたが全部ダメです

じゃあどうするかというと、$.filter()関数をつかえばいいです。こいつは条件を満たした(引数に指定する関数がtrueを返す)ものだけを第一引数にidとかで指定かければ、それに合うものだけjQuery特有のあのarrayもどきなobjectに入れて返します。

まともなhtmlを書いていればidは重複しないので0番目の要素がほしい部分になります。

あとはそのinnerHtmlを挿入すればいいです。

GitHubに上げた

https://github.com/yumetodo/jQuery_Ajax_get_html_test

はい。デモページは

http://yumetodo.github.io/jQuery_Ajax_get_html_test/index.html

余談

いいんですよ!私はthenって書きたかったんだ!

参考リンク

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした