jQuery - AJAX load()メソッド
jQuery load()メソッド
jQueryload()メソッドは、シンプルですが強力なAJAXメソッドです。
このload()メソッドはサーバーからデータをロードし、返されたデータを選択された要素に配置します。
構文：
<div>$(<i>selector</i>).load(<i>URL,data,callback</i>);</div>
必須のURLパラメータは、ロードするURLを指定します。
オプションのdataパラメータは、リクエストとともに送信するクエリ文字列のキーと値のペアのセットを指定します。
load()オプションのコールバックパラメータは、メソッドの完了後に実行される関数の名前です。
サンプルファイル「demo_test.txt」の内容は次のとおりです。
<div><h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p></div>
次の例では、ファイル「demo_test.txt」の内容を特定の<div>要素にロードします。
URLパラメーターにjQueryセレクターを追加することもできます。
次の例では、ファイル"demo_test.txt" 内のid="p1"要素のコンテンツを特定の<div>要素にロードします。
オプションのコールバック パラメーターは、load()メソッドの完了時に実行するコールバック関数を指定します。コールバック関数にはさまざまなパラメータを指定できます。
responseTxt- 呼び出しが成功した場合、結果のコンテンツが含まれますstatusTxt- 通話のステータスが含まれていますxhr- XMLHttpRequestオブジェクトを含む
次の例では、load()メソッドの完了後にアラートボックスが表示されます。load()メソッドが成功すると、「外部コンテンツが正常にロードされました!」と表示され、失敗するとエラーメッセージが表示されます。
例
$("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);
});
});
jQuery AJAXリファレンス
すべてのjQuery AJAXメソッドの完全な概要については、jQuery AJAXリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。