Ajaxで別ページのHTMLを取得する

別ページのHTMLの内容をAjaxを使って取得してみます。

サンプルコード

test.html(取得するHTML)

<div id="contents">
	<div id="sample">ここの内容を取得してみます。</div>
</div>

JavaScript

$(function() {
	$.ajax({
		type: 'GET',
		url: 'test.html',
		dataType: 'html',
		success: function(data) {
			console.log($(data).find('#sample').text());
		}
	});
});

Ajaxで取得した後、find()を使って要素の絞り込みを行っています。
Ajaxで別ページのHTMLを取得するデモページ
　

【参考サイト】

• jQueryの$.loadと$.ajaxを使って他のページの内容を読み込む方法｜WEB Drawer