JQuery($.load)イベントの使い方と分析について
3680 ワード
まず、jquery loadメソッドがjQuery.であることを明らかにする必要があります.ajax()は、複雑な論理を処理する必要がある場合にjQueryを使用する必要がある場合に便利にカプセル化されています.ajax()という比較的包括的な方法です.
loadメソッドを呼び出す完全な構文フォーマット:load(url,[data],[callback])urlは、ファイルをインポートするアドレスを指します.data:オプションパラメータ;loadは静的htmlファイルだけでなく、PHPファイルなどのダイナミックスクリプトもインポートできるので、ダイナミックファイルをインポートする場合は、渡すパラメータをここに置くことができます.callback:オプションパラメータ;loadメソッドを呼び出してサーバ応答を得た後に実行する別の関数です.
次に、いくつかの使用例を示します.
1.転送パラメータを含まないphpファイルをロード
2.転送パラメータを含むphpファイルをロードします.
3.複数の伝達パラメータを含むphpファイルをロードします.注意:パラメータ間をカンマで区切る
4.配列を伝達パラメータとして使用するphpファイルをロードします.
注意:loadを使用すると、これらのパラメータはPOSTで伝達されるため、/test.phpでは、GETでパラメータを取得することはできません.
5.callbackの使用方法.たとえば、loadメソッドでサーバ応答を得た後、ロードされたコンテンツをゆっくり表示するには、callback関数を使用します.コードは次のとおりです.
6.ページフラグメントのロード
.load()メソッドでは、挿入するリモートドキュメントの一部を指定できます.この点はurlパラメータの特殊な構文によって実現される.文字列に1つ以上のスペースが含まれている場合、最初のスペースに続く文字列は、ロードされたコンテンツを決定するjQueryセレクタです.例:
7.jquery loadのキャッシュ使用を防止する方法
キャッシュというものは、ある程度ページのロードを速めますが、私たちに迷惑をかけることもよくあります.実際の運用では、ブラウザキャッシュの問題に遭遇する可能性があります.例えば私はIE 7でこの問題に遭遇しました.
testを更新したときhtml以降も、IE 7ではloadメソッドは古いtestを使用している.html、リフレッシュキーを押しても構いません.幸いjQueryはajaxがキャッシュを使用することを防止する方法を提供しており、headのjavascriptファイルに次の文を追加すれば、問題を解決することができます.
また、キャッシュを解決する方法をいくつか紹介します.注意:私はjQuery loadの問題でテストしたことがありません.これらの方法は参考にしてください.
1.testなどのファイル名を変更します.htmlをlables_に変更new.html、しかしこれは仕方がない方法で、普通はこのようにする人はいません.
2.test.htmlに特定の時間を加える、例えばtest.html?20081116.実際の作業では、css/javascriptファイルを更新した後、ファイルがキャッシュされないようにします.
3.test.htmlファイルの上部には、次の宣言が追加されています.
また、jquery loadを使用する際に注意しなければならないのは、
(1)Windowsオブジェクトにバインドすると、ウィンドウ、フレーム、オブジェクト、画像など、すべてのコンテンツがロードされた後にトリガーされます.エレメントにバインドされている場合は、エレメントのコンテンツのロードが完了するとトリガーされます.
(2)この要素が完全にロードされる前にloadの処理関数をバインドしてこそ、ロードが完了した後にトリガーされる.後でバインドすると永遠にトリガーされません.だから$(document)にいないでください.ready()では、jQueryがすべてのDOMロードが完了した後にloadイベントをバインドするため、loadイベントをバインドします.
(3)jQueryはブラウザを用いる.innerHTMLプロパティは、フェッチされたドキュメントを解析し、現在のドキュメントに挿入します.このプロセスでは、ブラウザがドキュメントから要素(たとえば、要素)をフィルタリングすることがよくあります.結果はload()でフェッチされた要素は、ブラウザで直接フェッチされたドキュメントとは異なる場合があります.
loadメソッドを呼び出す完全な構文フォーマット:load(url,[data],[callback])urlは、ファイルをインポートするアドレスを指します.data:オプションパラメータ;loadは静的htmlファイルだけでなく、PHPファイルなどのダイナミックスクリプトもインポートできるので、ダイナミックファイルをインポートする場合は、渡すパラメータをここに置くことができます.callback:オプションパラメータ;loadメソッドを呼び出してサーバ応答を得た後に実行する別の関数です.
次に、いくつかの使用例を示します.
1.転送パラメータを含まないphpファイルをロード
$("#myID").load("/test.php");// id #myID test.php
2.転送パラメータを含むphpファイルをロードします.
$("#myID").load("/test.php",{"name":"Adam"});// php ， url：/test.php?name=Adam
3.複数の伝達パラメータを含むphpファイルをロードします.注意:パラメータ間をカンマで区切る
$("#myID").load("/test.php",{"name":"Adam","site":"www.lhy-seo.com"});// php ， url：/test.php?name=Adam&site=www.phpernote.com
4.配列を伝達パラメータとして使用するphpファイルをロードします.
$("#myID").load("/test.php",{'myinfo[]', ["Adam", "www.lhy-seo.com"]});// php 。
注意:loadを使用すると、これらのパラメータはPOSTで伝達されるため、/test.phpでは、GETでパラメータを取得することはできません.
5.callbackの使用方法.たとえば、loadメソッドでサーバ応答を得た後、ロードされたコンテンツをゆっくり表示するには、callback関数を使用します.コードは次のとおりです.
$("#go").click(function(){
$("#myID").load("welcome.php", {"lname":"Cai", "fname":"Adam", function(){
$("#myID").fadeIn('slow');}
);
});
6.ページフラグメントのロード
.load()メソッドでは、挿入するリモートドキュメントの一部を指定できます.この点はurlパラメータの特殊な構文によって実現される.文字列に1つ以上のスペースが含まれている場合、最初のスペースに続く文字列は、ロードされたコンテンツを決定するjQueryセレクタです.例:
$("#result").load("/test.html #container");
7.jquery loadのキャッシュ使用を防止する方法
キャッシュというものは、ある程度ページのロードを速めますが、私たちに迷惑をかけることもよくあります.実際の運用では、ブラウザキャッシュの問題に遭遇する可能性があります.例えば私はIE 7でこの問題に遭遇しました.
$(document).ready(function(){
$("#labels").load("/test.html");
// ， ID #labels DOM test.html 。
});
testを更新したときhtml以降も、IE 7ではloadメソッドは古いtestを使用している.html、リフレッシュキーを押しても構いません.幸いjQueryはajaxがキャッシュを使用することを防止する方法を提供しており、headのjavascriptファイルに次の文を追加すれば、問題を解決することができます.
$.ajaxSetup({
cache: false // AJAX
});
また、キャッシュを解決する方法をいくつか紹介します.注意:私はjQuery loadの問題でテストしたことがありません.これらの方法は参考にしてください.
1.testなどのファイル名を変更します.htmlをlables_に変更new.html、しかしこれは仕方がない方法で、普通はこのようにする人はいません.
2.test.htmlに特定の時間を加える、例えばtest.html?20081116.実際の作業では、css/javascriptファイルを更新した後、ファイルがキャッシュされないようにします.
3.test.htmlファイルの上部には、次の宣言が追加されています.
また、jquery loadを使用する際に注意しなければならないのは、
(1)Windowsオブジェクトにバインドすると、ウィンドウ、フレーム、オブジェクト、画像など、すべてのコンテンツがロードされた後にトリガーされます.エレメントにバインドされている場合は、エレメントのコンテンツのロードが完了するとトリガーされます.
(2)この要素が完全にロードされる前にloadの処理関数をバインドしてこそ、ロードが完了した後にトリガーされる.後でバインドすると永遠にトリガーされません.だから$(document)にいないでください.ready()では、jQueryがすべてのDOMロードが完了した後にloadイベントをバインドするため、loadイベントをバインドします.
(3)jQueryはブラウザを用いる.innerHTMLプロパティは、フェッチされたドキュメントを解析し、現在のドキュメントに挿入します.このプロセスでは、ブラウザがドキュメントから要素(たとえば、要素)をフィルタリングすることがよくあります.結果はload()でフェッチされた要素は、ブラウザで直接フェッチされたドキュメントとは異なる場合があります.