jQueryの.load()を使って別ページの指定箇所を取得表示する方法

jQueryの.load()関数を使って別ページの指定箇所のみをピンポイントで取得し、その取得した情報を表示する方法をご紹介します。

取得表示するためのボタンとエリアのCSS記述

※取得表示するためのボタンとエリアのCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
#idLoadBtn{
	cursor:pointer;
	margin:auto;
	width:120px;
	text-align:center;
	padding:12px;
	background-color:#FF4242;
	color:#FFFFFF;
	border:solid 1px #FF4242;
	-moz-box-shadow: 0 0 4px #FF4242, 0 0 12px #FF4242 5px 5px 5px #FF4242;
	-webkit-box-shadow: 0 0 4px #FF4242, 0 0 12px #FF4242, 5px 5px 5px #FF4242;
	font-size:18px;
}
#idLoadBtn:hover{
	cursor:pointer;
	margin:auto;
	width:120px;
	text-align:center;
	padding:12px;
	background-color:#FFFFFF;
	color:#FF8686;
	border:solid 1px #FF8686;
	-moz-box-shadow: 0 0 2px #FF8686, 0 0 6px #FF8686 3px 3px 3px #FF8686;
	-webkit-box-shadow: 0 0 2px #FF8686, 0 0 6px #FF8686, 3px 3px 3px #FF8686;
	font-size:18px;
}
#idLoadLlink{
	cursor:pointer;
	margin:auto;
	width:700px;
	border:solid 1px #FF4242;
	color:#FF4242;
}
#idLoadLlink a{
	color:#FF4242;
	line-height:1.4em;
}
-->
</style>

load()を使ったJavaScriptの記述

※#idLoadBtnボタンをクリックすると別ページURLの指定箇所を.load()で取得し、取得した内容を#idLoadLlinkエリアに表示します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#idLoadBtn").click(function(){
		$("#idLoadLlink").load("/ #categories-2 ul li");
	});
});
</script>

load()で取得表示するためのボタンとエリアのHTMLの記述

※取得表示するためのボタンとエリアです。必要に応じて変更して下さい。

<div id="idLoadBtn">クリック</div>


<div id="idLoadLlink">
このエリアに取得情報を表示します。
</div>
<!--/idLoadLlink-->

jQueryの.loadを使って別ページの指定箇所を取得表示するデモページ

jQueryの.loadを使って別ページの指定箇所を取得表示するデモページ

別ドメインのURL（クロスドメイン）は指定出来ないと思いますが、今度検証してみます。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。