jQueryで外部にあるHTMLを読み込む

2016.09.23　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボ技術メモです。

今回は、jQueryで外部HTMLの指定した部分を読み込んでみたいと思います。

具代的には、外部にあるお知らせ一覧ページから、指定した件数だけ読み込んで表示するDEMOを作ります。

外部にあるお知らせ一覧ページは以下のようなものを作りました。

■外部ページの読み込みたい部分のHTML

<div id="demo_block">
<ul>
<li><span>2016/09/25</span>1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事</li>
<li><span>2016/09/24</span>2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事</li>
<li><span>2016/09/23</span>3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事</li>
											・
											・
											・
</ul>
</div>

<ul>

<li><span>2016/09/25</span>1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事</li>

<li><span>2016/09/24</span>2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事</li>

<li><span>2016/09/23</span>3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事3つ目の記事</li>

・

</ul>

</div>

さて、ここから5件だけ取り出して表示させます。

まずは外部HTMLを表示させたい領域を以下のように記述します。

■表示するHTML領域

<div id="info"><!-- ここに読み込んだHTMLを表示 --></div>

1	<div id="info"><!-- ここに読み込んだHTMLを表示 --></div>

次にJavascript部分です。

必要なものはjQueryだけで、Ajaxで外部ページを読み込みます。

Ajaxとは、Asynchronous JavaScript + XML の略で、非同期通信を利用してデータを取得したり、動的にウェブページの内容を書き換える技術のことです。
Google Mapなどに利用されています。

■Javascript部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
	$.ajax({
		url: 'demo.html', //読み込むファイルを指定
		cache: false, //キャッシュを保存するかの指定
		success: function(html){
			//データ取得後に実行する処理
			$(html).find('#demo_block').each(function(){　//読み込みたい部分の指定　※今回は#demo_blockの中身のulから読み込まれる
				$('#info').html($(this).html()); //読み込んだ外部HTMLを表示する領域を指定
				return false;
			});
			$('ul li:gt(4)').remove(); //6件目以降の li を削除
		}
	});
});
</script>