最新のWeb開発のチュートリアル
 

jQuery - AJAX load() Method

❮前 次の章❯

jQueryのload()メソッド

jQueryのload()メソッドは、シンプルでありながら強力なAJAXの方法です。

load()メソッドをロードし、サーバからのデータとは、選択した要素の中に返されたデータを置きます。

構文：

$(selector).load(URL,data,callback);

必要なURLパラメータを使用すると、ロードしたいのURLを指定します。

オプションのデータパラメータは、一連の指定querystring要求と一緒に送信するキー/値のペアを。

任意のコールバックパラメータは、後の機能の名称が実行されるload()メソッドは終了します。

ここに私たちのサンプルファイルの内容は次のとおりです。 "demo_test.txt" ：

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

次の例では、ファイルの内容ロード"demo_test.txt"特定へ<div>要素を：

例

$("#div1").load("demo_test.txt");
»それを自分で試してみてください

URLパラメータにjQueryのセレクタを追加することも可能です。

次の例では、との元素の含有量をロードするid="p1"ファイル内の"demo_test.txt"特定に、 <div>要素：

例

$("#div1").load("demo_test.txt #p1");
»それを自分で試してみてください

オプションのコールバックパラメータは、ときに実行するコールバック関数を指定するload()メソッドが完了しました。 コールバック関数は、異なるパラメータを持つことができます。

  • responseTxt -呼び出しが成功した場合、結果のコンテンツが含まれています
  • statusTxt -コールのステータスが含まれています
  • xhr -含まれているXMLHttpRequestオブジェクトを

後に次の例では、警告ボックスが表示されload()メソッドが完了します。 場合load()メソッドが成功した、それが表示されます"External content loaded successfully!" 、それが失敗した場合は、エラーメッセージが表示されます。

例

$("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);
    });
});
»それを自分で試してみてください

jQueryのAJAXリファレンス

すべてのjQueryのAJAXメソッドの完全な概要については、当社をご覧くださいjQueryのAJAXリファレンス 。


❮前 次の章❯