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>要素に読み込みます：

例

$("#div1").load("demo_test.txt");

自分で試してみてください

URLパラメータにjQuery選択子を追加することもできます。

以下の例では、"demo_test.txt"ファイル内のid="p1"の要素の内容を指定された<div>要素に読み込みます：

例

$("#div1").load("demo_test.txt #p1");

自分で試してみてください

オプションの 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);
  });
});

自分で試してみてください

jQuery AJAX 参考マニュアル

完全な AJAX メソッドの参照が必要な場合は、以下の jQuery AJAX 参考マニュアル。