詳細(xì)解讀Jquery各Ajax函數(shù):
$.get(),$.post(),$.ajax(),$.getJSON()
一,$.get(url,[data],[callback])
說明:url為請求地址,data為請求數(shù)據(jù)的列表,callback為請求成功后的回調(diào)函數(shù),該函數(shù)接受兩個參數(shù),第一個為服務(wù)器返回的數(shù)據(jù),第二個參數(shù)為服務(wù)器的狀態(tài),是可選參數(shù)。
而其中,服務(wù)器返回數(shù)據(jù)的格式其實是字符串形勢,并不是我們想要的json數(shù)據(jù)格式,在此引用只是為了對比說明
$("#getResponse").html(data); }//返回的data是字符串類型
);
說明:這個函數(shù)跟$.get()參數(shù)差不多,多了一個type參數(shù),type為請求 的數(shù)據(jù)類型,可以是html,xml,json等類型,如果我們設(shè)置這個參數(shù)為:json,那么返回的格式則是json格式的,如果沒有設(shè)置,就 和$.get()返回的格式一樣,都是字符串的
$("#postResponse").html(data.name);
},"json"http://設(shè)置了獲取數(shù)據(jù)的類型,所以得到的數(shù)據(jù)格式為json類型的
);
說明:$.ajax()這個函數(shù)功能強大,可以對ajax進(jìn)行許多精確的控制,需要詳細(xì)說明的請參照相關(guān)資料
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});
$("#getJSONResponse").html(jsonData.id);}//無需設(shè)置,直接獲取的數(shù)據(jù)類型為json,
所以調(diào)用時需要使用jsonData.id方式
);
載入靜態(tài)頁面
load( url, [data], [callback] );
url (String) 請求的HTML頁的URL地址
data (Map)(可選參數(shù)) 發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)
callback (Callback) (可選參數(shù)) 請求完成時(不需要是success的)的回調(diào)函數(shù)
load()方法可以輕松載入靜態(tài)頁面內(nèi)容到指定jQuery對象。
get( url, [data], [callback] )
url (String) 發(fā)送請求的URL地址.
data (Map)(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù),以 Key/value 的鍵值對形式表示,會做為QueryString附加到請求URL中
callback (Callback) (可選參數(shù)) 載入成功時回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)
很顯然這是一個專門實現(xiàn)GET方式的函數(shù),使用起來也相當(dāng)?shù)暮唵?br />
url (String) 發(fā)送請求的URL地址.
data (Map)(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù),以 Key/value 的鍵值對形式表示
callback (Callback) (可選參數(shù)) 載入成功時回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)
type (String) (可選參數(shù)) 請求數(shù)據(jù)的類型,xml,text,json等
同樣是jQuery提供的一個簡便函數(shù),其實用法
getScript( url, [callback] )
url (String) 待載入 JS 文件地址
callback (Function) (可選) 成功載入后回調(diào)函數(shù)
getScript()函數(shù)可以遠(yuǎn)程載入JavaScript腳本并且執(zhí)行。這個函數(shù)可以跨 域載入JS文件(神奇……?!)。這個函數(shù)的意義是巨大 的,它可以很大程度的縮減頁面初次載入的代碼量,因為你可以根據(jù)用戶的交互來載入相應(yīng)的JS文件,而不必在頁面初始化的時候全部載入。
getJSON(url,[data],[callback])
url (String) 發(fā)送請求地址
data (Map) (可選) 待發(fā)送 Key/value 參數(shù)
callback (Function) (可選) 載入成功時回調(diào)函數(shù)。
JSON是一種理想的數(shù)據(jù)傳輸格式,它能夠很好的融合與JavaScript或其他宿主語 言,并且可以被JS直接使用。使用JSON相比傳統(tǒng)的通過 GET、POST直接發(fā)送”裸體”數(shù)據(jù),在結(jié)構(gòu)上更為合理,也更為安全。至于jQuery的getJSON()函數(shù),只是設(shè)置了JSON參數(shù)的 ajax()函數(shù)的一個簡化版本。這個函數(shù)也是可以跨域使用的,相比get()、post()有一定優(yōu)勢。另外這個函數(shù)可以通過把請求url寫 成”myurl?callback=X”這種格式,讓程序執(zhí)行回調(diào)函數(shù)X。
ajax( options )
ajax()提供了一大票參數(shù),所以可以實現(xiàn)相當(dāng)復(fù)雜的功能。
參數(shù)名 | 類型 | 描述 |
url | String | (默認(rèn): 當(dāng)前頁地址) 發(fā)送請求的地址。 |
type | String | (默認(rèn): “GET”) 請求方式 (“POST” 或 “GET”), 默認(rèn)為 “GET”。 注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。 |
timeout | Number | 設(shè)置請求超時時間(毫秒)。此設(shè)置將覆蓋全局設(shè)置。 |
async | Boolean | (默認(rèn): true) 默認(rèn)設(shè)置下,所有請求均為異步請求。 如果需要發(fā)送同步請求,請將此選項設(shè)置為 false。 注意,同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執(zhí)行。 |
beforeSend | Function | 發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù),如添加自定義 HTTP 頭。 XMLHttpRequest 對象是唯一的參數(shù)。 function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request } |
cache | Boolean | (默認(rèn): true) jQuery 1.2 新功能,設(shè)置為 false 將不會從瀏覽器緩存中加載請求信息。 |
complete | Function | 請求完成后回調(diào)函數(shù) (請求成功或失敗時均調(diào)用)。 參數(shù): XMLHttpRequest 對象,成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } |
contentType | String | (默認(rèn): “application/x-www-form-urlencoded”) 發(fā)送信息至服務(wù)器時內(nèi)容編碼類型。默認(rèn)值適合大多數(shù)應(yīng)用場合。 |
data | Object, String | 發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。 查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。 如果為數(shù)組,jQuery 將自動為不同值對應(yīng)同一個名稱。 如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 ‘&foo=bar1&foo=bar2′。 |
dataType | String | 預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,jQuery 將自動根據(jù) HTTP 包 MIME 信息 返回 responseXML 或 responseText,并作為回調(diào)函數(shù)參數(shù)傳遞,可用值: “xml”: 返回 XML 文檔,可用 jQuery 處理。 “html”: 返回純文本 HTML 信息;包含 script 元素。 “script”: 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。 “json”: 返回 JSON 數(shù)據(jù) 。 “jsonp”: JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時, 如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。 |
error | Function | (默認(rèn): 自動判斷 (xml 或 html)) 請求失敗時將調(diào)用此方法。 這個方法有三個參數(shù):XMLHttpRequest 對象,錯誤信息,(可能)捕獲的錯誤對象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個有值 this; // the options for this ajax request } |
global | Boolean | (默認(rèn): true) 是否觸發(fā)全局 AJAX 事件。設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件, 如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
ifModified | Boolean | (默認(rèn): false) 僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。 使用 HTTP 包 Last-Modified 頭信息判斷。 |
processData | Boolean | (默認(rèn): true) 默認(rèn)情況下,發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象(技術(shù)上講并非字符串) 以配合默認(rèn)內(nèi)容類型 “application/x-www-form-urlencoded”。 如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息,請設(shè)置為 false。 |
success | Function | 請求成功后回調(diào)函數(shù)。這個方法有兩個參數(shù):服務(wù)器返回數(shù)據(jù),返回狀態(tài) function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } |
你可以指定xml、script、html、json作為其數(shù)據(jù)類型,可以為beforeSend、error、sucess、complete等狀態(tài)設(shè)置 處理函數(shù),眾多其它參數(shù)也可以訂完完全全定義用戶的Ajax體驗。下面的例子中,我們用ajax()來調(diào)用一個XML文檔:
ajaxStart
(全局事件) 開始新的Ajax請求,并且此時沒有其他ajax請求正在進(jìn)行
beforeSend
(局部事件) 當(dāng)一個Ajax請求開始時觸發(fā)。如果需要,你可以在這里設(shè)置XMLHttpRequest對象
ajaxSend
(全局事件) 請求開始前觸發(fā)的全局事件
success
(局部事件) 請求成功時觸發(fā)。即服務(wù)器沒有返回錯誤,返回的數(shù)據(jù)也沒有錯誤
ajaxSuccess
全局事件全局的請求成功
error
(局部事件) 僅當(dāng)發(fā)生錯誤時觸發(fā)。你無法同時執(zhí)行success和error兩個回調(diào)函數(shù)
ajaxError
全局事件全局的發(fā)生錯誤時觸發(fā)
complete
(局部事件) 不管你請求成功還是失敗,即便是同步請求,你都能在請求完成時觸發(fā)這個事件
ajaxComplete
全局事件全局的請求完成時觸發(fā)
ajaxStop
(全局事件) 當(dāng)沒有Ajax正在進(jìn)行中的時候,觸發(fā)
局部事件在之前的函數(shù)中都有介紹,我們主要來看看全局事件。對某個對象進(jìn)行全局事件監(jiān)聽,那么全局中的AJAX動作,都會對其產(chǎn)生影響。比如,當(dāng)頁面在進(jìn)行AJAX操作時,ID為”loading”的DIV就顯示出來:
val()
val()函數(shù)可以返回表單組建的值,例如任何種類input的值。配合選擇符操作,你可以輕易獲取選項組、輸入框、按鈕等元素的值。
serialize函數(shù)可以幫你把表單對象的所有值都轉(zhuǎn)換為字符串序列。如果你要寫GET格式的請求,這個就非常方便了。
serializeArray()和serialize()類似,只不過它返回的是JSON對象。
PS:本站還提供了幾款功能十分強大的json解析、轉(zhuǎn)換與格式化工具供大家選擇使用,相信對于大家接下來的json格式數(shù)據(jù)處理會有所幫助:
在線JSON代碼檢驗、檢驗、美化、格式化工具:
http://tools.VeVB.COm/code/json
在線XML/JSON互相轉(zhuǎn)換:
http://tools.VeVB.COm/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.VeVB.COm/code/jsoncodeformat
C語言風(fēng)格/HTML/CSS/json代碼格式化美化工具:
http://tools.VeVB.COm/code/ccode_html_css_json
新聞熱點
疑難解答