jQuery Ajax()方法使用指南_jquery-js教程-PHP中文網

jQuery Ajax()方法使用指南_jquery

WBOY

發布： 2016-05-16 16:30:54

原創

1556 人瀏覽過

jQuery提供了簡單且強大的選擇器功能，同時對Ajax操作也給予了很好的支援。在Ajax方面，jQuery除了提供底層的jQuery.ajax()方法外，也提供了以下的簡單方法：

（1） jQuery.get(url, [data], [callback], [type])

（2） jQuery.getJSON(url, [data], [callback])

（3） jQuery.getScript(url, [callback])

（4） jQuery.post(url, [data], [callback], [type])

由於jQuery.ajax()功能比較強大，可配置的參數比較多，現在主要對這個方法的注意事項進行總結。

1. jQuery.ajax()預設是以非同步的方式請求的，如果需要同步，使用參數async為false。因為有些應用程式必須同步請求資料的。例如，某些Flash與JS互動應用中，請求一個JS函數需要馬上得到回傳資料。此時，必須採用同步的Ajax呼叫方式。

2. Ajax如果是Get請求，回傳的資料通常會被瀏覽器緩存，如果不想被緩存，可以設定cache參數為false；或傳送請求是帶上時間戳，這樣瀏覽器會認為是新的請求，而重新從伺服器載入資料。當然，如果是POST發送的請求則不會被快取。

3. dataType：預期伺服器回傳的資料類型。如果不指定，jQuery 將自動根據 HTTP 套件 MIME 資訊傳回 responseXML 或 responseText，並作為回呼函數參數傳遞，可用值:

（1）"xml": 傳回 XML 文檔，可用 jQuery 處理。

（2）"html": 傳回純文字 HTML 資訊；所包含的script標籤會在插入dom時執行。

（3）"script": 傳回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了"cache"參數。 '''注意：'''在遠端請求時(不在同一個網域下)，所有POST請求都會轉為GET請求。 (因為將使用DOM的script標籤來載入)

（4）"json": 傳回 JSON 資料。

（5）"jsonp": JSONP 格式。使用 JSONP 形式呼叫函數時，如 "myurl?callback=?" jQuery 會自動取代 ? 為正確的函式名，以執行回呼函數。

（6）"text": 傳回純文字字串

其中，"script"、"json"設定可以解決Ajax的跨域問題。

4. 若伺服器傳回的一個字串或數值，則使用普通的ajax呼叫即可。

如果伺服器回傳的是一個JSON對象，那麼最好採用jQuery.getJSON的方式，或是設定dataType=json。因為瀏覽器解析JSON對象需要時間，直接返回JSON對象，節省解析時間，可以避免在伺服器明明有返回數據，但是瀏覽器得不到的錯誤。

5. Ajax呼叫是需要時間的，所以一般將Ajax呼叫後的處理程式碼全部放在回呼方法中。不能採用這樣的處理方式：

複製程式碼程式碼如下:

函數 getMyPrizeList(){

    if(isNotEmpty(uid)){

        var obj=new Object();

        嘗試{

          jQuery.ajax({type:"GET",url:"someurl",async:false,cache:false,dataType:"script",scriptCharset:"gbk",success:function(json){

                     obj=json;

                  }

              });

           }catch(e){}

           obj=eval("(" obj ")");

           //警報(obj);

           var str="";

           for(var i in obj)

           {

               str ='' ''prizearray[obj[i].prizeno] ''

               str ='' 'CD-KEY：'obj[i].cdkey ''

               str ='' '期限：' obj[i].expiratedate '前' '
';

           }

           jQuery("#prizelist").append(str);

        }

}

而必須這樣處理：即將處理程式碼放到成功函數裡面！

複製程式碼程式碼如下：

函數 getMyPrizeList(){

    if(isNotEmpty(uid)){

        var obj=new Array();

        嘗試{

                  jQuery.ajax({type:"GET",url:"someurl",

                              快取使用：假，

                              資料型態：「腳本」，

                               scriptCharset:"gbk",

                               成功：函數（json){

                                 嘗試{

                                }catch(e){}

                                jQuery("#prizelist").html("")
;
                                var str="";

                                for(var i=0;i for(var i=0;i
                                 地
                                   
                                }

                                jQuery("#prizelist").append(str);                   

                               }

                   });

           }catch(e){}

        }

}

6. jQuery.get實例JSON：

複製程式碼程式碼如下：

//內部函數，實現債務人詳細資料的載入、設定值

    function innerShowDetail() {

       // 取得JSON格式的資料

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

           // 依key設定value

           for (key in json) {

              if(key == 'id'){

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

              } else {

                  if(json[key] == ''){

                     // 沒有值設定為空白

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

                  } else if(key == 'sex'){

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

                  } else if(key == 'group'){

                     if(json[key] != null) {

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

                     }

                  } else {

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

                  }

              }

           }

           //設定對話方塊標題與內容

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

           dialog.setTitle('檢視人員[' json['userName'] ']詳細資料');

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

       });

    }