jQuery - AJAXのload()メソッド
jQueryのload()メソッド
load()メソッドは、サーバーからデータをロードし、返されたデータを選択した要素に配置します。
構(gòu)文:
$(selector).load(URL,data,callback);
必須の URL パラメーターは、ロードする URL を指定します。
オプションの data パラメーターは、リクエストとともに送信されるクエリ文字列のキーと値のペアのセットを指定します。
オプションのコールバック パラメーターは、load() メソッドの完了後に実行される関數(shù)の名前です。
これはサンプル ファイル (「demo_test.txt」) の內(nèi)容です:
<h2>jQuery AJAX 是個(gè)非常棒的功能！</h2> <p id="p1">這是段落的一些文本。</p>
ファイル「demo_test.txt」の內(nèi)容を指定された <div> 要素にロードします:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<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");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本內(nèi)容</h2></div>
<button>獲取外部內(nèi)容</button>
</body>
</html>jQuery セレクター URL パラメーターに追加。
この例では、「demo_test.txt」ファイル內(nèi)の id="p1" を持つ要素のコンテンツを、指定された <div> 要素にロードします:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 #p1");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>獲取外部文本</button>
</body>
</html>オプションのコールバック パラメーターは、load() の後に許可される內(nèi)容を指定します。メソッドのコールバック関數(shù)が完成しました。コールバック関數(shù)は、さまざまなパラメーターを設(shè)定できます。
responseTxt - 呼び出しが成功したときの結(jié)果の內(nèi)容が含まれます
statusTXT - 呼び出しのステータスが含まれます
xhr - XMLHttpRequest オブジェクトが含まれます
次の例では、呼び出しの後にプロンプ??トが表示されます。 load() メソッドがフレームを完成させます。 load() メソッドが成功すると、「外部コンテンツが正常にロードされました!」が表示され、失敗すると、エラー メッセージが表示されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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("外部內(nèi)容加載成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改該文本</h2></div>
<button>獲取外部內(nèi)容</button>
</body>
</html>完全な例: HTML ファイル: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<div class="comment">
已有評論：
</div>
<div class="comment">
<h6>張三：</h6>
<p class="para">沙發(fā)。</p>
</div>
<div class="comment">
<h6>李四：</h6>
<p class="para">板凳。</p>
</div>
<div class="comment">
<h6>王五：</h6>
<p class="para">地板。</p>
</div>
</body>
</html>
別の HTML ファイルを作成し (名前は自由に選択できます)、jQuery AJAX のload() メソッドを記述します: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$("#resText").load("text.html"); //引入text.html文件。
});
});
</script>
</head>
<body>
<input type="button" id="send" value="Ajax獲取" />
<div id="resText"></div>
</body>
</html>
