jQuery .load()で簡単に別ページの指定箇所を取得して表示する方法｜DAD UNION

この記事では、jQueryの.load()関数を使って、別のページから指定した箇所のみを取得し、その取得した情報を表示する方法について詳しく説明します。

Contents

.load()関数の基本的な使い方
ステップ1: ボタンと表示エリアのCSS記述
ステップ2: jQueryの.load()関数を使ったJavaScriptの記述
ステップ3: ボタンと表示エリアのHTML記述
jQueryの.loadを使って別ページの指定箇所を取得表示するデモページ
クロスドメインの制約について
さらに学びたい方へ
まとめ

.load()関数の基本的な使い方

jQueryの.load()関数は、指定したURLからデータを取得し、そのデータを特定のHTML要素に挿入するための簡単な方法です。この関数を使用することで、ページ全体をリロードすることなく、部分的な更新を実現できます。

ステップ1: ボタンと表示エリアのCSS記述

まず、取得表示するためのボタン（#idLoadBtn）と表示エリア（#idLoadLlink）のCSSを設定します。
以下の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>

ステップ2: jQueryの.load()関数を使ったJavaScriptの記述

次に、JavaScriptを使って、ボタン（#idLoadBtn）がクリックされたときに別のページの指定した箇所を取得して表示エリア（#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>

ステップ3: ボタンと表示エリアのHTML記述

最後に、ボタン（id=”idLoadBtn”）と表示エリア（id=”idLoadLlink”）のHTMLを記述します。
以下のコードを使用して、ページにボタンと表示エリアを追加します。

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


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

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

以下のリンクをクリックすると、実際のデモページを見ることができます。このデモページでは、上記のコードを使って、別のページから指定した情報を取得して表示しています。
jQueryの.loadを使って別ページの指定箇所を取得表示するデモページ

クロスドメインの制約について

注意点として、.load()関数は同一ドメイン内でのリクエストにのみ対応しています。異なるドメインからデータを取得することはできません。しかし、JSONPやCORS（Cross-Origin Resource Sharing）を利用することで、クロスドメインのデータ取得も可能です。これについては、別の記事で詳しく説明します。

さらに学びたい方へ

jQueryの.load()関数についてさらに深く理解するために、以下のトピックについても学んでみてください。

AJAXの基本:
.load()関数はAJAXリクエストを簡単にするためのものです。AJAXの基本を理解することで、.load()関数の背後にある仕組みをより深く理解できます。
JSONPとCORS:
異なるドメインからデータを取得する際に必要となる技術です。これらの技術を使うことで、クロスドメインの制約を回避できます。
jQueryの他のAJAX関数:
.get()や.post()など、.load()以外にも便利なAJAX関数がたくさんあります。これらを使いこなすことで、より柔軟なデータ取得が可能になります。

これらのトピックについても、順次ブログで解説していきますので、ぜひご覧ください。