jQuery-AJAX load()メソッド【jQuery load()メソッドは簡単だが強力なAJAXメソッドです.】構文:$(selector).load(URL,data,callback);


jQuery-AJAX load()メソッド
jQuery load()メソッド
jQuery load()メソッドは簡単だが強力なAJAXメソッドである.
load()メソッドは、サーバからデータをロードし、返されたデータを選択された要素に格納します.
構文:
$(
selector).load(
URL,data,callback);
必要なURLパラメータは、ロードするURLを指定します.
オプションのdataパラメータは、リクエストとともに送信されるクエリー文字列キー/値ペアのセットを規定します.
オプションのcallbackパラメータは、load()メソッドが完了した後に実行される関数名です.
サンプルファイル(「demo_test.txt」)の内容です.

jQuery and AJAX is FUN!!!


This is some text in a paragraph.


次の例では、ファイル「demo_test.txt」の内容を指定した
要素にロードします.
≪インスタンス|Instance|emdw≫
$("#div1").load("demo_test.txt");
試してみる»
jQueryセレクタをURLパラメータに追加することもできます.
次の例では、「demo_test.txt」ファイルのid=「p 1」の要素の内容を、指定した
要素にロードします.
≪インスタンス|Instance|emdw≫
$("#div1").load("demo_test.txt #p1");
試してみる»
オプションのcallbackパラメータは、load()メソッドが完了した後に許可されるコールバック関数を規定します.コールバック関数は、異なるパラメータを設定できます.
responseTxt-呼び出しが成功した場合の結果を含むstatusTXT-呼び出しを含むステータスxhr-XMLHttpRequestオブジェクトを含む次の例では、load()メソッドが完了するとプロンプトボックスが表示されます.load()メソッドが成功した場合、「外部コンテンツのロードに成功しました!」と表示されます.失敗すると、エラーメッセージが表示されます.
≪インスタンス|Instance|emdw≫
$("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);
  });
});
試してみる»
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("        !");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>   jQuery AJAX      </h2></div>
<button>      </button>

</body>
</html>