jQuery API の load( url [, data] [, complete( responseText, textStatus, XMLHttpRequest )] ) は、サーバからHTMLデータを読み込み、マッチした要素内に、読み込んだHTMLデータを配置する。
引数
- url
リクエスト送信先のURLを含む文字列。
URLの後ろにスペースを入れ、スペースの後ろに、セレクターを使用できる。
- data
オプション。
サーバへ送信するデータ。マップで指定する。
- complete( responseText, textStatus, XMLHttpRequest )
オプション。
リクエストが完了すると実行するコールバック関数。
- responseText
リクエストに対する戻り値。
- textStatus
リクエストの現在の状態。
- XMLHttpRequest
XMLHttpRequestオブジェクト。
記述方法
jQuery( セレクター ) . load( url );
urlに指定したHTMLデータを読み込み、セレクターにマッチした要素内に、読み込んだHTMLデータを配置する。
記述例
jQuery( '#sample' ) . load( 'sample.html' );
「sample.html」を読み込み、idが「sample」である要素内に、読み込んだHTMLデータを配置する。
jQuery( '#sample' ) . load( 'sample.html .sample-load' );
「sample.html」ファイル内のクラス名が「sample-load」である要素を読み込み、idが「sample」である要素内に、読み込んだ要素を配置する。
実装例（サンプル）
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、「jquery-sample-load.html」ファイル内のidが「jquery-sample-contents」であるp要素を読み込み、黄色のボックス要素内に表示する。「toggle」ボタンを、再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample-load' ) . load(
'jquery-sample-load.html #jquery-sample-contents',
function( responseText, textStatus, XMLHttpRequest ) {
if( textStatus == 'success' ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
} else {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
}
}
);
},
function() {
jQuery( '#jquery-sample-load' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample-load' ) . load(
'jquery-sample-load.html #jquery-sample-contents',
function( responseText, textStatus, XMLHttpRequest ) {
if( textStatus == 'success' ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
} else {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
}
}
);
},
function() {
jQuery( '#jquery-sample-load' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
width: 200px;
}
#jquery-sample-load {
margin: 10px;
padding: 10px;
height: 100px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
width: 200px;
}
#jquery-sample-load {
margin: 10px;
padding: 10px;
height: 100px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-load"></div>
</div>
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-load"></div>
</div>
読み込んだHTMLファイルの中身
<p id="jquery-sample-contents">読み込んだ内容。</p>