jQuery - AJAX load() メソッド
jQuery load() メソッド
jQuery load() メソッドは、シンプルでありながら強力な AJAX メソッドです。
load() メソッドはサーバーからデータを読み込み、返されたデータを選択した要素に挿入します。
構文：
$(selector).load(URL,data,callback);
必須URLパラメータは、読み込みたい URL を指定します。
オプションdataパラメータは、リクエストとともに送信されるクエリ文字列のキー/値ペアのコレクションを指定します。
オプションcallbackパラメータは、load() メソッドの完了後に実行される関数名です。
これはサンプルファイル（"demo_test.txt"）の内容です：
<h2>jQuery AJAX はとても素晴らしい機能です！</h2>
<p id="p1">これは段落のテキストの一部です。</p>
次の例では、ファイル "demo_test.txt" の内容を指定した <div> 要素に読み込みます：
jQuery セレクターを URL パラメータに追加することもできます。
次の例では、"demo_test.txt" ファイル内の id="p1" の要素の内容を、指定した <div> 要素に読み込みます：
オプションの callback パラメータは、load() メソッドの完了後に実行されるコールバック関数を指定します。コールバック関数にはさまざまなパラメータを設定できます：
- responseTxt- 呼び出しが成功した場合の結果内容を含みます
- statusTXT- 呼び出しのステータスを含みます
- xhr- XMLHttpRequest オブジェクトを含みます
次の例では、load() メソッドの完了後にアラートボックスを表示します。load() メソッドが成功した場合は「外部コンテンツの読み込みに成功しました！」と表示し、失敗した場合はエラーメッセージを表示します：
例
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部コンテンツの読み込みに成功しました！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
試してみる »