HTML
JavaScript
jQuery
Ajax

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って書きたかったんだ!


参考リンク