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リファレンスにアクセスしてください。