jQuery Ajax() メソッドの使用ガイド_jquery-jsチュートリアル-php.cn

jQuery Ajax() メソッドの使用ガイド_jquery

WBOY

リリース： 2016-05-16 16:30:54

オリジナル

1533 人が閲覧しました

jQuery はシンプルかつ強力なセレクター関数を提供し、Ajax 操作の優れたサポートも提供します。 Ajax に関しては、基礎となる jQuery.ajax() メソッドの提供に加えて、jQuery は次の単純なメソッドも提供します。

(1) jQuery.get(url, [データ], [コールバック], [タイプ])

(2) jQuery.getJSON(url, [データ], [コールバック])

(3) jQuery.getScript(url, [コールバック])

(4) jQuery.post(url, [データ], [コールバック], [タイプ])

jQuery.ajax()は比較的強力で設定可能なパラメータも多いので、このメソッドの注意点を中心にまとめます。

1. jQuery.ajax() はデフォルトで非同期的にリクエストされます。同期が必要な場合は、パラメーター async を false に設定します。一部のアプリケーションはデータを同期的に要求する必要があるためです。たとえば、一部の Flash および JS インタラクティブアプリケーションでは、JS 関数をリクエストするには即時の戻りデータが必要です。現時点では、同期 Ajax 呼び出しを使用する必要があります。

2. Ajax が Get リクエストの場合、返されたデータは通常、ブラウザによってキャッシュされます。キャッシュされたくない場合は、キャッシュパラメータを false に設定するか、タイムスタンプを付けてリクエストを送信します。サーバーからデータをリロードする際、ブラウザはそれが新しいリクエストであると認識します。もちろん、リクエストが POST で送信された場合はキャッシュされません。

3. DataType: サーバーによって返されることが予想されるデータ型。指定しない場合、jQuery は HTTP パケットの MIME 情報に基づいて responseXML または responseText を自動的に返し、それをコールバック関数のパラメーターとして渡します。使用可能な値:

(1) "xml": jQuery で処理できる XML ドキュメントを返します。

(2) "html": プレーンテキストの HTML 情報を返します。含まれている script タグは、dom に挿入されると実行されます。

(3) "script": プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。「キャッシュ」パラメータが設定されていない限り。 ''''注意:''''リモートリクエスト (同じドメインの下ではない) を行う場合、すべての POST リクエストは GET リクエストに変換されます。 (読み込みにDOMスクリプトタグを使用するため)

(4) "json": JSON データを返します。

(5) 「jsonp」: JSONP形式。「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出す場合、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。

(6) "text": プレーンテキスト文字列を返します

このうち「script」と「json」の設定はAjaxのクロスドメイン問題を解決できます。

4. サーバーが文字列または数値を返す場合は、通常の ajax 呼び出しを使用します。

サーバーが JSON オブジェクトを返す場合は、jQuery.getJSON を使用するか、dataType=json を設定するのが最善です。ブラウザーが JSON オブジェクトを解析するには時間がかかるため、JSON オブジェクトを直接返すと解析時間が節約され、サーバーが明らかにデータを返してもブラウザーがデータを取得できないというエラーが回避されます。

5. Ajax 呼び出しには時間がかかるため、通常、Ajax 呼び出し後のすべての処理コードはコールバックメソッドに配置されます。このアプローチは使用できません:

コードをコピーコードは次のとおりです:

関数 getMyPrizeList(){
    if(isNotEmpty(uid)){
        var obj=新しいオブジェクト();
        試してみてください{
          jQuery.ajax({type:"GET",url:"someurl",async:false,cache:false,dataType:"script",scriptCharset:"gbk",success:function(json){
                     obj=json;
                  }
              });
           }キャッチ(e){}
           obj=eval("(" obj ")");
           //alert(obj);
           var str="";
           for(obj の変数 i)
           {
               str = '' 「」プライズ配列[obj[i].prizeno] ''
               str = '' 'CD-KEY：' obj[i].cdkey ''
               str = '' '期限：' obj[i].expiratedate '前' '';
           }
           jQuery("#prizelist").append(str);
        }
}

而して必须蠷处処理：即处処理代コードを成功関数数里面に放ちます！

复制代码代码如下:

関数 getMyPrizeList(){
    if(isNotEmpty(uid)){
        var obj=新しい配列();
        試してみてください{
                  jQuery.ajax({type:"GET",url:"someurl",
                               キャッシュ:false、
                               データタイプ:"スクリプト",
                               scriptCharset:"gbk",
                               成功:関数(json){
                                 試してみてください{
                                      obj=結果;
                                }キャッチ(e){}
                                jQuery("#賞品リスト").html("");
                                var str="";
                                for(var i=0;i                                     str =''プライズ配列[obj[i].prizeno] '';
                                    str ='CD-KEY：' obj[i].cdkey '';
                                    str ='期限：' obj[i].expiratedate '前';
                                }
                                jQuery("#賞品リスト").append(str);
                               }
                   });
           }キャッチ(e){}
        }
}

6. jQuery.getJSON の例：

复制代码代码如下:

//債務者の詳細をロードし、値を設定する内部関数

関数 innerShowDetail() {

// JSON 形式でデータを取得します

$.getJSON('load.do',{id : userId}, function(json) {

// キーに基づいて値
を設定します
for (json のキー) {

If(key == 'id'){

$('#detailDiv #' key).val(json[key]);

} else {

If(json[キー] == ''){

// 空に設定された値はありません 

$('#detailDiv #' key).html(' ');

} else if(key == '性別'){

$('#detailDiv #' key).html(json[key] == '0' ? '女性' : '男性');

} else if(key == 'グループ'){

If(json[キー] != null) {

$('#detailDiv #' key).html(json[key]['groupName']);

}

} else {

$('#detailDiv #' key).html(json[key]);

}

}

}

//ダイアログのタイトルと内容を設定します

$('#detailDiv').removeAttr('class');

Dialog.setTitle('人物[' json['userName'] '] の詳細を表示');

Dialog.setContent($('#detailDiv').html());

});

}