load()で外部のHTMLを取得／表示する
先ほどは外部のテキストファイルの内容を取得・表示する方法を紹介しましたが、外部のHTMLファイルの内容を取得・表示したい場合も、同じくload()を使います。
たとえば次のようなHTMLファイルの内容を取得したいとしましょう。
▼サンプル02で取得するHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample2</title>
</head>
<body>
<p>変更後</p>
</body>
</html>
単純にload()に「sample2_load.html」を指定すると、セレクターで指定したp要素の内側が、sample2_load.htmlの冒頭にある「<!DOCTYPE..」から、末尾の「</html>」までですべて置き換えられてしまいます。
$("p").load("./sample2_load.html");
これでは困るので、HTMLの場合は、ファイル名（URL）の後ろにCSSセレクターを追加することで読み込みたい場所を絞り込めます。以下の例では、sample2_load.htmlの中のp要素だけを読み込みます。
$("p").load("./sample2_load.html p");
ただし、上記のコードの場合、元のHTMLのp要素の中身をsample2_load.htmlのp要素に置き換えることになるため、実行すると以下のようにp要素が入れ子になってしまいます。
<p><p>変更後</p></p>
そこで、次のようにp要素をdiv要素で包み、jQueryのセレクターでは外側のdiv要素を指定します。これなら意図どおり、sample2_load.htmlのp要素を読み込めます。
<div><p>変更前</p></div>
$("div").load("./sample2_load.html p");
▼サンプル02（HTML＋スクリプト部分）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("div").load("./sample2_load.html p");
})
})
</script>
</head>
<body>
<button>変更</button>
<div><p>変更前</p></div>
</body>
</html>
ソーシャルリアクション
この連載の記事
一覧へ
WebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。
