everest33

自制力

公告

$.ajax()方法所有參數詳解;$.get(),$.post(),$.getJSON(),$.ajax()詳解

【一】$.ajax()所有參數詳解

url: 要求為String類型的參數，（默認為當前頁地址）發送請求的地址。

type: 要求為String類型的參數，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。

timeout: 要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。

async：要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。

cache：要求為Boolean類型的參數，默認為true（當dataType為script時，默認為false）。設置為false將不會從瀏覽器緩存中加載請求信息。

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

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：返回純文本字符串。

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

function(XMLHttpRequest){

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

}

complete：complete無論后臺返回200(成功)還是非200(失敗)都會回調。

　　要求為Function類型的參數，請求完成后調用的回調函數（請求成功或失敗時均調用,先調用成功或失敗后的回調函數,再調用complete的回調函數）。

參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。

例一:

　　　　function(XMLHttpRequest, textStatus){

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

　 }

　　例二:complete : function(XMLHttpRequest,status){ //請求完成后最終執行參數
　　　　　　if(status=='timeout'){//超時,status還有success,error等值的情況
　　　　　　　 ajaxTimeoutTest.abort();
　　　　　　　 alert("超時");
　　　　　　}
　　　　}

success：success是在后臺返回200狀態碼的時候回調的！

　　要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。

(1)由服務器返回，并根據dataType參數進行處理后的數據。

(2)描述狀態的字符串。

function(data, textStatus){

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

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

error：error是在后臺返回狀態碼為非200的時候回調的。

　　　　要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。

ajax事件函數如下：

　　 function(XMLHttpRequest, textStatus, errorThrown){//通常情況下textStatus和errorThrown只有其中一個包含信息

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

}

contentType：要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

dataFilter：要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。

function(data, type){

//返回處理后的數據

return data;

}

global：要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局 ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

ifModified：要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

jsonp：要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，例如

{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。

username：要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。

password：要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。

processData：要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講并非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。

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);
                      }
         });
    });
});

【二】$.get(),$.post(),$.getJSON(),$.ajax();詳解

本文重點是來講講jQuery中調用ajax的4種方法：$.get、$.post、$getJSON、$ajax。如果讀者沒有javascript和jquery的知識，或者沒有ajax的概念，那么請先去問問google老大，再來讀本文。

1、$.get

$.get()方法使用GET方式來進行異步請求，它的語法結構為：

$.get( url [, data] [, callback] )

解釋一下這個函數的各個參數：

url：string類型，ajax請求的地址。

data：可選參數，object類型，發送至服務器的key/value數據會作為QueryString附加到請求URL中。

callback：可選參數，function類型，當ajax返回成功時自動調用該函數。

最后寫一個$.get()的實例供大家參考：

$.get(
    "submit.aspx",{
        id:     '123',
        name:   '青藤園',
    },function(data,state){
        //這里顯示從服務器返回的數據
        alert(data);
        //這里顯示返回的狀態
        alert(state);
    }
)

2、$.post()

$.post()方法使用POST方式來進行異步請求，它的語法結構為：

$.post(url,[data],[callback],[type])

這個方法和$.get()用法差不多，唯獨多了一個type參數，那么這里就只介紹type參數吧，其他的參考上面$.get()的。

type：type為請求的數據類型，可以是html,xml,json等類型，如果我們設置這個參數為：json，那么返回的格式則是json格式的，如果沒有設置，就和$.get()返回的格式一樣，都是字符串的?！窘忉尅恳馑际钱斣O置了type為"json"時，(首先php文件輸出必須是json字符串格式數據)，返回的數據經過了JSON.parse()處理了，直接就是json對象格式。不設置type時，（php輸出是json字符串格式），返回的數據是字符串，經過JSON.parse()處理才能變為json（對象）格式。

最后寫一個$.post()的實例供大家參考：

$.post(
    "submit.aspx",{
        id:     '123',
        name:   '青藤園',
    },function(data,state){
        //這里顯示從服務器返回的數據
        alert(data);
        //這里顯示返回的狀態
        alert(state);
    },
    "json"
)

3、$.getJSON()

$.getJSON()是專門為ajax獲取json數據而設置的，并且支持跨域調用，其語法的格式為：

getJSON(url,[data],[callback]) 【返回的數據也是經過JSON.parse()處理過了】

url：string類型，發送請求地址 data ：可選參數，待發送 Key/value 參數，同get，post類型的data callback ：可選參數，載入成功時回調函數，同get，post類型的callback

JSON 是一種理想的數據傳輸格式，它能夠很好的融合與JavaScript或其他宿主語言，并且可以被JS直接使用。使用JSON相比傳統的通過 GET、POST直接發送“裸體”數據，在結構上更為合理，也更為安全。至于jQuery的getJSON()函數，只是設置了JSON參數的 ajax()函數的一個簡化版本。這個函數也是可以跨域使用的，相比get()、post()有一定優勢。另外這個函數可以通過把請求url寫成"myurl?callback=X"這種格式，讓程序執行回調函數X。

4、$.ajax()

$.ajax()是jquery中通用的一個ajax封裝，其語法的格式為：

$.ajax(options)

其中options是一個object類型，它指明了本次ajax調用的具體參數，這里我把最常用的幾個參數附上

$.ajax({
        url: 'submit.aspx',
        datatype: "json",
        type: 'post',
        success: function (e) {   //成功后回調
            alert(e);
        },
        error: function(e){    //失敗后回調
            alert(e);
        },
        beforeSend: function(){  /發送請求前調用，可以放一些"正在加載"之類額話
            alert("正在加載");
        }
})

posted on 2016-12-11 15:31 everest33 閱讀(3683) 評論(0) 收藏舉報

刷新頁面返回頂部

everest33

導航

公告

$.ajax()方法所有參數詳解;$.get(),$.post(),$.getJSON(),$.ajax()詳解