天天看點

[js]$.ajax标準寫法

1 $.ajax({
 2     url:"http://www.microsoft.com",    //請求的url位址
 3     dataType:"json",   //傳回格式為json
 4     async:true,//請求是否異步,預設為異步,這也是ajax重要特性
 5     data:{"id":"value"},    //參數值
 6     type:"POST",   //請求方式
 7     beforeSend:function(){
 8         //請求前的處理
 9     },
10     success:function(req){
11         //請求成功時處理
12     },
13     complete:function(){
14         //請求完成的處理
15     },
16     error:function(){
17         //請求出錯處理
18     }
19 });      

$.ajax()方法詳解

jquery中的ajax方法參數總是記不住,這裡記錄一下。

1.url: 

要求為String類型的參數,(預設為目前頁位址)發送請求的位址。

2.type: 

要求為String類型的參數,請求方式(post或get)預設為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分浏覽器支援。

3.timeout: 

要求為Number類型的參數,設定請求逾時時間(毫秒)。此設定将覆寫$.ajaxSetup()方法的全局設定。

4.async: 

要求為Boolean類型的參數,預設設定為true,所有請求均為異步請求。如果需要發送同步請求,請将此選項設定為false。注意,同步請求将鎖住浏覽器,使用者其他操作必須等待請求完成才可以執行。

5.cache: 

要求為Boolean類型的參數,預設為true(當dataType為script時,預設為false),設定為false将不會從浏覽器緩存中加載請求資訊。

6.data: 

要求為Object或String類型的參數,發送到伺服器的資料。如果已經不是字元串,将自動轉換為字元串格式。get請求中将附加在url後。防止這種自動轉換,可以檢視  processData選項。對象必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,JQuery将自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

7.dataType: 

要求為String類型的參數,預期伺服器傳回的資料類型。如果不指定,JQuery将自動根據http包mime資訊傳回responseXML或responseText,并作為回調函數參數傳遞。可用的類型如下:

xml:傳回XML文檔,可用JQuery處理。

html:傳回純文字HTML資訊;包含的script标簽會在插入DOM時執行。

script:傳回純文字JavaScript代碼。不會自動緩存結果。除非設定了cache參數。注意在遠端請求時(不在同一個域下),所有post請求都将轉為get請求。

json:傳回JSON資料。

jsonp:JSONP格式。使用SONP形式調用函數時,例如myurl?callback=?,JQuery将自動替換後一個“?”為正确的函數名,以執行回調函數。

text:傳回純文字字元串。

8.beforeSend:

要求為Function類型的參數,發送請求前可以修改XMLHttpRequest對象的函數,例如添加自定義HTTP頭。在beforeSend中如果傳回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。

            function(XMLHttpRequest){

               this;   //調用本次ajax請求時傳遞的options參數

            }

9.complete:

要求為Function類型的參數,請求完成後調用的回調函數(請求成功或失敗時均調用)。參數:XMLHttpRequest對象和一個描述成功請求類型的字元串。

          function(XMLHttpRequest, textStatus){

             this;    //調用本次ajax請求時傳遞的options參數

          }

10.success:要求為Function類型的參數,請求成功後調用的回調函數,有兩個參數。

         (1)由伺服器傳回,并根據dataType參數進行處理後的資料。

         (2)描述狀态的字元串。

         function(data, textStatus){

            //data可能是xmlDoc、jsonObj、html、text等等

            this;  //調用本次ajax請求時傳遞的options參數

         }

11.error:

要求為Function類型的參數,請求失敗時被調用的函數。該函數有3個參數,即XMLHttpRequest對象、錯誤資訊、捕獲的錯誤對象(可選)。ajax事件函數如下:

       function(XMLHttpRequest, textStatus, errorThrown){

          //通常情況下textStatus和errorThrown隻有其中一個包含資訊

          this;   //調用本次ajax請求時傳遞的options參數

       }

12.contentType:

要求為String類型的參數,當發送資訊至伺服器時,内容編碼類型預設為"application/x-www-form-urlencoded"。該預設值适合大多數應用場合。

13.dataFilter:

要求為Function類型的參數,給Ajax傳回的原始資料進行預處理的函數。提供data和type兩個參數。data是Ajax傳回的原始資料,type是調用jQuery.ajax時提供的dataType參數。函數傳回的值将由jQuery進一步處理。

            function(data, type){

                //傳回處理後的資料

                return data;

            }

14.dataFilter:

要求為Function類型的參數,給Ajax傳回的原始資料進行預處理的函數。提供data和type兩個參數。data是Ajax傳回的原始資料,type是調用jQuery.ajax時提供的dataType參數。函數傳回的值将由jQuery進一步處理。

            function(data, type){

                //傳回處理後的資料

                return data;

            }

15.global:

要求為Boolean類型的參數,預設為true。表示是否觸發全局ajax事件。設定為false将不會觸發全局ajax事件,ajaxStart或ajaxStop可用于控制各種ajax事件。

16.ifModified:

要求為Boolean類型的參數,預設為false。僅在伺服器資料改變時擷取新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false,即忽略頭資訊。

17.jsonp:

要求為String類型的參數,在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裡的"callback"部分,例如{jsonp:'onJsonPLoad'}會導緻将"onJsonPLoad=?"傳給伺服器。

18.username:

要求為String類型的參數,用于響應HTTP通路認證請求的使用者名。

19.password:

要求為String類型的參數,用于響應HTTP通路認證請求的密碼。

20.processData:

要求為Boolean類型的參數,預設為true。預設情況下,發送的資料将被轉換為對象(從技術角度來講并非字元串)以配合預設内容類型"application/x-www-form-urlencoded"。如果要發送DOM樹資訊或者其他不希望轉換的資訊,請設定為false。

21.scriptCharset:

要求為String類型的參數,隻有當請求時dataType為"jsonp"或者"script",并且type是GET時才會用于強制修改字元集(charset)。通常在本地和遠端的内容編碼不同時使用。

案例代碼:

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText裡面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});      

22.順便說一下$.each()函數:

$.each()函數不同于JQuery對象的each()方法,它是一個全局函數,不操作JQuery對象,而是以一個數組或者對象作為第1個參數,以一個回調函數作為第2個參數。回調函數擁有兩個參數:第1個為對象的成員或數組的索引,第2個為對應變量或内容。

參考:https://www.cnblogs.com/tylerdonet/p/3520862.html