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