jQuery- AJAX load()メソッド
jQuery load()メソッド
jQueryload()
メソッドはシンプルですが、強力なAJAXメソッドです。
このload()
メソッドはサーバーからデータをロードし、返されたデータを選択した要素に配置します。
構文:
$(selector).load(URL,data,callback);
必須のURLパラメータは、ロードするURLを指定します。
オプションのデータパラメータは、リクエストとともに送信するクエリ文字列のキーと値のペアのセットを指定します。
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>
要素にロードします。
例
$("#div1").load("demo_test.txt");
URLパラメーターにjQueryセレクターを追加することもできます。
次の例では、ファイル「demo_test.txt」内のid = "p1"の要素のコンテンツを特定の<div>
要素にロードします。
例
$("#div1").load("demo_test.txt #p1");
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);
});
});
jQueryAJAXリファレンス
すべてのjQueryAJAXメソッドの完全な概要については、jQueryAJAXリファレンスにアクセスしてください。