jQuery load() メソッドは、 シンプルでありながら強力な AJAX メソッドです。
load() メソッドは、サーバからデータを読込み、選択した要素へ取得したデータを配置します。
構文:
$(selector).load(URL,data,callback);
必須の URL パラメータは、ロードしたい URL を指定します。
オプションの data パラメータは、リクエストと一緒に送信する、クエリ文字列のキー/値のペアにした組を指定します。
オプションの callback パラメータは、 load() メソッドが完了した後に実行される関数名です。
これは、事例で使用するファイルのコンテンツです："demo_test.txt":
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
次の例は、"demo_test.txt" ファイルのコンテンツを、指定の <div> 要素の中にロードします：
URL パラメータに jQuery セレクタを追加することも可能です。
次の例は、指定した <div> 要素内に、ファイル "demo_test.txt" の中の id="p1" を持つ 要素のコンテンツをロードします：
オプションの callback パラメータは、load() メソッドが完了したときに実行する関数です。 コールバック関数は、いろいろなパラメータを持つことができます：
次の例は、load() メソッドが完了後、アラートボックスを表示します。 load() メソッドが成功した場合は、"External content loaded successfully!" を、 失敗した場合は、エラーメッセージを表示します：
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
Try it Yourself »
すべての jQuery AJAX メソッドの完全な概要については、jQuery AJAX リファレンスをご覧ください。