皆様こんにちは。普段はC++やってます。
本題に。
jQueryを用いて単にhtmlを読み込み表示する
これは簡単です。
http://yokano-jp.blogspot.jp/2013/10/jquery-html_10.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>
<h2>外部ファイル</h2>
<p>この文章は external.html に記載された外部 HTML の文章です</p>
$(function() {
$('#page').load('external.html');
});
簡単ですよね
jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する
ええ、違うんです、やりたいのはそうじゃない。そもそも、そのexternal.html、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>
<!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>
$(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に渡すパラメータは最低限timeoutとdatatypeだけあれば十分です。
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()関数をつかえばいいです。こいつは条件を満たした(引数に指定する関数が第一引数にidとかで指定かければ、それに合うものだけjQuery特有のあのarrayもどきなobjectに入れて返します。trueを返す)ものだけを
まともなhtmlを書いていればidは重複しないので0番目の要素がほしい部分になります。
あとはそのinnerHtmlを挿入すればいいです。
GitHubに上げた
はい。デモページは
余談
@yumetodo それ、jQuery使わないで自分でXHR生で使った方が早かったんじゃね？
— Chikuzen (@mtfmk) 2016, 3月 10
いいんですよ！私はthenって書きたかったんだ！
参考リンク
- jQuery.ajax()で取得したHTMLの一部を抜き出す方法: 小粋空間 (さっぱり動かなかった)
- javascript - Setting timeout jQuery.load() - Stack Overflow
- jquery - ajax timeout callback function - Stack Overflow
-
javascript - jQuery() not finding elements inside of results from jQuery.parseHTML() - Stack Overflow(質問者自ら書いている回答に
$.filter()使えとあります。これのおかげで救われました) - filter(fn) - jQuery 日本語リファレンス