jQuery - AJAX load()メソッド

jQuery load()メソッドはシンプルで機能豊かなAJAXメソッドです。

jQueryのload()メソッド

jQuery load()メソッドはサーバーからデータを読み込み、返されるHTMLを選択された要素に配置します。

このメソッドは、Webサーバーからデータを非同期に読み込むシンプルな方法を提供します。

これはload()メソッドの文法：

jQuery(selector).load(URL, data, callback)

パラメータ：

• URL-リクエストしたいURLを指定します

• data -（オプション）リクエストとともにサーバーに送信されるクリーンなオブジェクトまたは文字列を指定します

• callback-（オプション）load()メソッドが完了した後に実行されるコールバック関数を指定します

以下示例将ajax_intro.txtファイルの内容をDIV要素にロードします：

$("button").click(function(){
　　jQuery("div").load("ajax_intro.txt");
});

以下示例加载ajax_post.htmlページ，并发送一些其他数据：

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　jQuery("div").load("ajax_post.php", data);
});

这是PHPファイルの外観（"ajax_post.html"）：

<?php
　　　　echo "<p>Hello 。".$_POST['fname']." 。".$_POST['lname'].", How are u doing?</p>";
?>

请求方法：如果将数据作为对象提供，则使用POST方法。否则，假定为GET。

使用回调加载页面

可选的callback参数指定load()方法完成后要运行的回调函数。

回调函数可以具有不同的参数：

• response　 -包含请求中的结果数据

• status -包含请求的状态（"success", "notmodified", "error", "timeout", 或 "parsererror"）

• xhr-包含XMLHttpRequest对象

以下示例将加载ajax_post.html页面，并发送一些其他数据和警报状态消息：

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　jQuery("div").load("ajax_post.php", data, function(response, status){
　　　　alert(status);
　　});
});

以下示例在Ajax请求遇到错误时显示通知：

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　jQuery("#success").load("wrong_file.php", data, function(response, status, xhr){
　　　　if(status　==　"error"){
　　　　　　let　msg　=　"Sorry　but　there　was　an　error:　";
　　　　　　$("#error").html(msg　+　xhr.status　+　"　"　+　xhr.statusText);
　　　　}
　　});
});

ページの一部をロード

jQuery load()このメソッドは、ドキュメントの一部のみを取得することも許可します。

これは、URLパラメータの後にスペースとjQuery選択子を付けることで簡単に実現できます。

以下の例では、ファイル「ajax_load.html」のIDが「table」の要素の内容をDIV要素にロードします：

$("button").click(function(){
　　$("div").load("ajax_load.html　#table");
});

jQuery AJAXリファレンス

完全なAJAXメソッドのリファレンスについては、私たちのjQuery AJAXリファレンス。