JavaScript PR

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

記事内に商品プロモーションを含む場合があります

この記事では、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関数がたくさんあります。これらを使いこなすことで、より柔軟なデータ取得が可能になります。

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

まとめ

この記事では、jQueryの.load()関数を使って別ページの指定箇所を取得し、その情報をページ内に表示する方法を紹介しました。この方法を使えば、ページ全体をリロードすることなく、動的にコンテンツを更新することができます。ぜひ試してみてください。

さらに、.load()関数の詳細やその他の使い方について学びたい場合は、公式ドキュメントを参照してください。

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