Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
詳細(xì)解讀Jquery各Ajax函數(shù)：
$.get(),$.post(),$.ajax(),$.getJSON()
一，$.get(url,[data],[callback])
說(shuō)明：url為請(qǐng)求地址，data為請(qǐng)求數(shù)據(jù)的列表，callback為請(qǐng)求成功后的回調(diào)函數(shù)，該函數(shù)接受兩個(gè)參數(shù)，第一個(gè)為服務(wù)器返回的數(shù)據(jù)，第二個(gè)參數(shù)為服務(wù)器的狀態(tài)，是可選參數(shù)。
而其中，服務(wù)器返回?cái)?shù)據(jù)的格式其實(shí)是字符串形勢(shì)，并不是我們想要的json數(shù)據(jù)格式，在此引用只是為了對(duì)比說(shuō)明
$.get("data.php",$("#firstName.val()"),function(data){
$("#getResponse").html(data); }//返回的data是字符串類型
);
二，$.post(url,[data],[callback],[type])
說(shuō)明：這個(gè)函數(shù)跟$.get()參數(shù)差不多，多了一個(gè)type參數(shù)，type為請(qǐng)求 的數(shù)據(jù)類型，可以是html,xml,json等類型，如果我們?cè)O(shè)置這個(gè)參數(shù)為：json，那么返回的格式則是json格式的，如果沒(méi)有設(shè)置，就 和$.get()返回的格式一樣，都是字符串的
$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//設(shè)置了獲取數(shù)據(jù)的類型，所以得到的數(shù)據(jù)格式為json類型的
);
三，$.ajax(opiton)
說(shuō)明：$.ajax()這個(gè)函數(shù)功能強(qiáng)大，可以對(duì)ajax進(jìn)行許多精確的控制，需要詳細(xì)說(shuō)明的請(qǐng)參照相關(guān)資料
$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});
四，$.getJSON(url,[data],[callback])
$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//無(wú)需設(shè)置，直接獲取的數(shù)據(jù)類型為json，
所以調(diào)用時(shí)需要使用jsonData.id方式
);
When Ajax meets jQuery 基于AJAX的應(yīng)用現(xiàn)在越來(lái)越多，而對(duì)于前臺(tái)開發(fā)人員來(lái)說(shuō)，直接和底層的HTTPRequest打交道又不是一件令人愉快的事情。jQuery既然封裝了 JavaScript，肯定已經(jīng)考慮過(guò)AJAX應(yīng)用的問(wèn)題。的確，如果用jQuery寫AJAX會(huì)比直接用JS寫方便N倍。（不知道用jQuery長(zhǎng)了， 會(huì)不會(huì)喪失對(duì)JS的知識(shí)了……） 這里假設(shè)大家對(duì)jQuery語(yǔ)法已經(jīng)比較熟悉，來(lái)對(duì)ajax的一些應(yīng)用作一些總結(jié)。
載入靜態(tài)頁(yè)面
load( url, [data], [callback] );
url (String) 請(qǐng)求的HTML頁(yè)的URL地址
data (Map)(可選參數(shù)) 發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)
callback (Callback) (可選參數(shù)) 請(qǐng)求完成時(shí)(不需要是success的)的回調(diào)函數(shù)
load()方法可以輕松載入靜態(tài)頁(yè)面內(nèi)容到指定jQuery對(duì)象。
$('#ajax-div').load('data.html');
這樣，data.html的內(nèi)容將被載入到ID為ajax-div的DOM對(duì)象之內(nèi)。你甚至可以通過(guò)制定ID來(lái)實(shí)現(xiàn)載入部分內(nèi)容的Ajax操作，如：
$('#ajax-div').load('data.html#my-section');
實(shí)現(xiàn)GET和POST方法
get( url, [data], [callback] )
url (String) 發(fā)送請(qǐng)求的URL地址.
data (Map)(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對(duì)形式表示，會(huì)做為QueryString附加到請(qǐng)求URL中
callback (Callback) (可選參數(shù)) 載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)
很顯然這是一個(gè)專門實(shí)現(xiàn)GET方式的函數(shù)，使用起來(lái)也相當(dāng)?shù)暮?jiǎn)單
$.get('login.php', {
id : 'Robin',
password: '123456',
gate : 'index'
}, function(data, status) {
//data為返回對(duì)象，status為請(qǐng)求的狀態(tài)
alert(data);
//此時(shí)假設(shè)服務(wù)器腳本會(huì)返回一段文字"你好，Robin！"，
那么瀏覽器就會(huì)彈出對(duì)話框顯示該段文字
alert(status);
//結(jié)果為success, error等等，但這里是成功時(shí)才能運(yùn)行的函數(shù)
});
post( url, [data], [callback], [type] )
url (String) 發(fā)送請(qǐng)求的URL地址.
data (Map)(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對(duì)形式表示
callback (Callback) (可選參數(shù)) 載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)
type (String) (可選參數(shù)) 請(qǐng)求數(shù)據(jù)的類型，xml,text,json等
同樣是jQuery提供的一個(gè)簡(jiǎn)便函數(shù)，其實(shí)用法
$.post('regsiter.php', {
id:'Robin',
password: '123456',
type:'user'
},function(data, status) {
alert(data);
}, "json");
事件驅(qū)動(dòng)的腳本載入函數(shù)：getScript()
getScript( url, [callback] )
url (String) 待載入 JS 文件地址
callback (Function) (可選) 成功載入后回調(diào)函數(shù)
getScript()函數(shù)可以遠(yuǎn)程載入JavaScript腳本并且執(zhí)行。這個(gè)函數(shù)可以跨 域載入JS文件（神奇……？！）。這個(gè)函數(shù)的意義是巨大 的，它可以很大程度的縮減頁(yè)面初次載入的代碼量，因?yàn)槟憧梢愿鶕?jù)用戶的交互來(lái)載入相應(yīng)的JS文件，而不必在頁(yè)面初始化的時(shí)候全部載入。
$.getScript('ajaxEvent.js', function() {
alert("Scripts Loaded!");
//載入ajaxEvent.js，并且在成功載入后顯示對(duì)話框提示。
});
構(gòu)建數(shù)據(jù)通訊的橋梁：getJSON()
getJSON(url,[data],[callback])
url (String) 發(fā)送請(qǐng)求地址
data (Map) (可選) 待發(fā)送 Key/value 參數(shù)
callback (Function) (可選) 載入成功時(shí)回調(diào)函數(shù)。
JSON是一種理想的數(shù)據(jù)傳輸格式，它能夠很好的融合與JavaScript或其他宿主語(yǔ) 言，并且可以被JS直接使用。使用JSON相比傳統(tǒng)的通過(guò) GET、POST直接發(fā)送數(shù)據(jù)，在結(jié)構(gòu)上更為合理，也更為安全。至于jQuery的getJSON()函數(shù)，只是設(shè)置了JSON參數(shù)的 ajax()函數(shù)的一個(gè)簡(jiǎn)化版本。這個(gè)函數(shù)也是可以跨域使用的，相比get()、post()有一定優(yōu)勢(shì)。另外這個(gè)函數(shù)可以通過(guò)把請(qǐng)求url寫 成”myurl?callback=X”這種格式，讓程序執(zhí)行回調(diào)函數(shù)X。
$.getJSON('feed.php',{
request: images,
id: 001,
size: large
}, function(json) {
alert(json.images[0].link);
//此處json就是遠(yuǎn)程傳回的json對(duì)象，假設(shè)其格式如下：
//{'images' : [
// {link: images/001.jpg, x :100, y : 100},
// {link: images/002.jpg, x : 200, y 200:}
//]};
}
);
更底層的ajax()函數(shù)
雖然get()和post()函數(shù)非常簡(jiǎn)潔易用，但是對(duì)于更復(fù)雜的一些設(shè)計(jì)需求還是無(wú)法實(shí)現(xiàn)，比如在ajax發(fā)送的不同時(shí)段做出不同的動(dòng)作等。jQuery提供一個(gè)更為具體的函數(shù)：ajax()。
ajax( options )
ajax()提供了一大票參數(shù)，所以可以實(shí)現(xiàn)相當(dāng)復(fù)雜的功能。
| 參數(shù)名 | 類型 | 描述 |
| url | String | (默認(rèn): 當(dāng)前頁(yè)地址) 發(fā)送請(qǐng)求的地址。 |
| type | String | (默認(rèn): “GET”) 請(qǐng)求方式 (“POST” 或 “GET”)， 默認(rèn)為 “GET”。 注意：其它 HTTP 請(qǐng)求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。 |
| timeout | Number | 設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。 |
| async | Boolean | (默認(rèn): true) 默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。 如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。 注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行。 |
| beforeSend | Function | 發(fā)送請(qǐng)求前可修改 XMLHttpRequest 對(duì)象的函數(shù)，如添加自定義 HTTP 頭。 XMLHttpRequest 對(duì)象是唯一的參數(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 將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。 |
| complete | Function | 請(qǐng)求完成后回調(diào)函數(shù) (請(qǐng)求成功或失敗時(shí)均調(diào)用)。 參數(shù)： XMLHttpRequest 對(duì)象，成功信息字符串。 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ù)器時(shí)內(nèi)容編碼類型。默認(rèn)值適合大多數(shù)應(yīng)用場(chǎng)合。 |
| data | Object, String | 發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET 請(qǐng)求中將附加在 URL 后。 查看 processData 選項(xiàng)說(shuō)明以禁止此自動(dòng)轉(zhuǎn)換。必須為 Key/Value 格式。 如果為數(shù)組，jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。 如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 ‘&foo=bar1&foo=bar2′。 |
| dataType | String | 預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動(dòng)根據(jù) HTTP 包 MIME 信息 返回 responseXML 或 responseText，并作為回調(diào)函數(shù)參數(shù)傳遞，可用值: “xml”: 返回 XML 文檔，可用 jQuery 處理。 “html”: 返回純文本 HTML 信息；包含 script 元素。 “script”: 返回純文本 JavaScript 代碼。不會(huì)自動(dòng)緩存結(jié)果。 “json”: 返回 JSON 數(shù)據(jù) 。 “jsonp”: JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時(shí)， 如 “myurl?callback=?” jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。 |
| error | Function | (默認(rèn): 自動(dòng)判斷 (xml 或 html)) 請(qǐng)求失敗時(shí)將調(diào)用此方法。 這個(gè)方法有三個(gè)參數(shù)：XMLHttpRequest 對(duì)象，錯(cuò)誤信息，（可能）捕獲的錯(cuò)誤對(duì)象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個(gè)有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個(gè)有值 this; // the options for this ajax request } |
| global | Boolean | (默認(rèn): true) 是否觸發(fā)全局 AJAX 事件。設(shè)置為 false 將不會(huì)觸發(fā)全局 AJAX 事件， 如 ajaxStart 或 ajaxStop ?？捎糜诳刂撇煌腁jax事件 |
| ifModified | Boolean | (默認(rèn): false) 僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。 使用 HTTP 包 Last-Modified 頭信息判斷。 |
| processData | Boolean | (默認(rèn): true) 默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象(技術(shù)上講并非字符串) 以配合默認(rèn)內(nèi)容類型 “application/x-www-form-urlencoded”。 如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為 false。 |
| success | Function | 請(qǐng)求成功后回調(diào)函數(shù)。這個(gè)方法有兩個(gè)參數(shù)：服務(wù)器返回?cái)?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體驗(yàn)。下面的例子中，我們用ajax()來(lái)調(diào)用一個(gè)XML文檔：
$.ajax({
url: 'doc.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
alert(xml);
//此處xml就是XML的jQuery對(duì)象了，你可以用find()、next()或XPath等方法在里面尋找節(jié)點(diǎn)，
和用jQuery操作HTML對(duì)象沒(méi)有區(qū)別
}
});
進(jìn)一步了解AJAX事件
前面討論的一些方法都有自己的事件處理機(jī)制，從頁(yè)面整體來(lái)說(shuō)，都只能說(shuō)是局部函數(shù)。jQuery提供了AJAX全局函數(shù)的定義，以滿足特殊的需求。下面是jQuery提供的所有函數(shù)（按照觸發(fā)順序排列如下）：
ajaxStart
(全局事件) 開始新的Ajax請(qǐng)求，并且此時(shí)沒(méi)有其他ajax請(qǐng)求正在進(jìn)行
beforeSend
(局部事件) 當(dāng)一個(gè)Ajax請(qǐng)求開始時(shí)觸發(fā)。如果需要，你可以在這里設(shè)置XMLHttpRequest對(duì)象
ajaxSend
(全局事件) 請(qǐng)求開始前觸發(fā)的全局事件
success
(局部事件) 請(qǐng)求成功時(shí)觸發(fā)。即服務(wù)器沒(méi)有返回錯(cuò)誤，返回的數(shù)據(jù)也沒(méi)有錯(cuò)誤
ajaxSuccess
全局事件全局的請(qǐng)求成功
error
(局部事件) 僅當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā)。你無(wú)法同時(shí)執(zhí)行success和error兩個(gè)回調(diào)函數(shù)
ajaxError
全局事件全局的發(fā)生錯(cuò)誤時(shí)觸發(fā)
complete
(局部事件) 不管你請(qǐng)求成功還是失敗，即便是同步請(qǐng)求，你都能在請(qǐng)求完成時(shí)觸發(fā)這個(gè)事件
ajaxComplete
全局事件全局的請(qǐng)求完成時(shí)觸發(fā)
ajaxStop
(全局事件) 當(dāng)沒(méi)有Ajax正在進(jìn)行中的時(shí)候，觸發(fā)
局部事件在之前的函數(shù)中都有介紹，我們主要來(lái)看看全局事件。對(duì)某個(gè)對(duì)象進(jìn)行全局事件，那么全局中的AJAX動(dòng)作，都會(huì)對(duì)其產(chǎn)生影響。比如，當(dāng)頁(yè)面在進(jìn)行AJAX操作時(shí)，ID為”loading”的DIV就顯示出來(lái)：
$("#loading").ajaxStart(function(){
$(this).show();
});
全局事件也可以幫助你編寫全局的錯(cuò)誤相應(yīng)和成功相應(yīng)，而不需要為每個(gè)AJAX請(qǐng)求設(shè)置。有必要指出，全局事件的參數(shù)是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三個(gè)參數(shù)。第一個(gè)參數(shù)即事件本身；第二個(gè)是XHR對(duì)象；第三個(gè)是你傳遞的ajax參數(shù)對(duì)象。在一個(gè)對(duì)象里顯示全局的AJAX情況：
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("正在請(qǐng)求"+o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url+"請(qǐng)求成功");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url+"請(qǐng)求失敗");
});
很顯然，第三個(gè)參數(shù)也可以幫助你傳遞你在AJAX事件里加入的自定義參數(shù)。 在單個(gè)AJAX請(qǐng)求時(shí)，你可以將global的值設(shè)為false，以將此請(qǐng)求于AJAX的全局事件。
$.ajax({
url: "request.php",
global: false,
// 禁用全局Ajax事件.
});
如果你想為全局AJAX設(shè)置參數(shù)，你會(huì)用上ajaxSetup()函數(shù)。例如，將所有AJAX請(qǐng)求都傳遞到request.php，；禁用全局方法；強(qiáng)制用POST方法傳遞：
$.ajaxSetup({
url: "request.php",
global: false,
type: "POST"
});
一些你不得不知道的方法
寫AJAX肯定離不開從頁(yè)面獲取相應(yīng)的值。在這里簡(jiǎn)單列舉一些方法：
val()
val()函數(shù)可以返回表單組建的值，例如任何種類input的值。配合選擇符操作，你可以輕易獲取選項(xiàng)組、輸入框、按鈕等元素的值。
$("input[name='info']:text").val();
//返回名字為info的文本框的值
$("input[name='pass']:password").val();
//返回名字為pass的密碼框的值
$("input[name='save']:radio").val();
//返回名字為save的單選項(xiàng)的值
//以此類推
serialize()
serialize函數(shù)可以幫你把表單對(duì)象的所有值都轉(zhuǎn)換為字符串序列。如果你要寫GET格式的請(qǐng)求，這個(gè)就非常方便了。
serializeArray()和serialize()類似，只不過(guò)它返回的是JSON對(duì)象。
PS：本站還提供了幾款功能十分強(qiáng)大的json解析、轉(zhuǎn)換與格式化工具供大家選擇使用，相信對(duì)于大家接下來(lái)的json格式數(shù)據(jù)處理會(huì)有所幫助：
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json
在線XML/JSON互相轉(zhuǎn)換：
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat
C語(yǔ)言風(fēng)格/HTML/CSS/json代碼格式化美化工具：
http://tools.jb51.net/code/ccode_html_css_json
相關(guān)文章
jquery 表單驗(yàn)證之通過(guò) class驗(yàn)證表單不為空
在開發(fā)系統(tǒng)時(shí)，往往都有某些表單數(shù)據(jù)為必填項(xiàng)，若用jQuery通過(guò)ID去驗(yàn)證，不僅會(huì)影響效率，還會(huì)有所遺漏，不易于后期維護(hù)。 本章將介紹如何利用jQuery，通過(guò)為表單配置class進(jìn)行統(tǒng)一驗(yàn)證。2015-11-11
jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
這篇文章主要介紹了使用jquery實(shí)現(xiàn)的鼠標(biāo)放上去顯示懸浮層即彈出定位的div層,需要的朋友可以參考下2014-04-04
JS JQUERY實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾到底的方法
這篇文章主要介紹了JS JQUERY實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾到底的方法,需要的朋友可以參考下2015-01-01
Iframe實(shí)現(xiàn)跨瀏覽器自適應(yīng)高度解決方法
這篇文章主要介紹了Iframe實(shí)現(xiàn)跨瀏覽器自適應(yīng)高度解決方法,通過(guò)父層容器的應(yīng)用來(lái)實(shí)現(xiàn)這一功能,非常實(shí)用的一個(gè)技巧,需要的朋友可以參考下2014-09-09
jQuery團(tuán)購(gòu)倒計(jì)時(shí)特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery團(tuán)購(gòu)倒計(jì)時(shí)特效實(shí)現(xiàn)方法,可實(shí)現(xiàn)相對(duì)固定時(shí)間的倒計(jì)時(shí)效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
在jquery.1.9以前的版本，可以使用$.browser很輕松的判斷瀏覽器的類型和版本，但是在1.9中和以后的版本中，$.browser已經(jīng)被刪除，下面就介紹一下如何實(shí)現(xiàn)此功能，希望能夠給需要的朋友帶來(lái)幫助2016-01-01
現(xiàn)在我要在瀏覽器里讀取緩存，因?yàn)閍jax請(qǐng)求的數(shù)據(jù)很大，請(qǐng)求一次就夠了。但是問(wèn)題來(lái)了，在FF里面，是沒(méi)有ajax緩存的，也就是每次都會(huì)觸發(fā)ajax請(qǐng)求，這點(diǎn)和IE不一樣2013-12-12
最近有一個(gè)活動(dòng)，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進(jìn)行交互。但是由于兩個(gè)網(wǎng)站處于不同的域名下，而Ajax的應(yīng)用中，由于安全的問(wèn)題，瀏覽器默認(rèn)是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法2010-12-12
使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請(qǐng)求的方法
這篇文章主要介紹了使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請(qǐng)求的方法,需要的朋友可以參考下2017-01-01
juqery 學(xué)習(xí)之六 CSS--css、位置、寬高
juqery 學(xué)習(xí)之六 CSS--css、位置、寬高，需要的朋友可以參考下。2011-02-02