jQuery中$.get、$.post、$.getJSON和$.ajax的用法詳解
當(dāng)我們用javascript寫ajax程序?qū)懙煤堋伴_心”的時(shí)候,突然有人告訴你有一種東西叫jquery,它會(huì)告訴你不直接和HttpRequest是多么的快樂,同時(shí)你再也不需要再煩惱糾結(jié)的ajax亂碼問題,更幸福的是你的js代碼將大大地簡(jiǎn)化,看完本文,你會(huì)發(fā)現(xiàn),ajax,簡(jiǎn)單的來講就是一句話的事情。
1、$.get
$.get()方法使用GET方式來進(jìn)行異步請(qǐng)求,它的語(yǔ)法結(jié)構(gòu)為:
$.get( url [, data] [, callback] )
解釋一下這個(gè)函數(shù)的各個(gè)參數(shù):
url:string類型,ajax請(qǐng)求的地址。
data:可選參數(shù),object類型,發(fā)送至服務(wù)器的key/value數(shù)據(jù)會(huì)作為QueryString附加到請(qǐng)求URL中。
callback:可選參數(shù),function類型,當(dāng)ajax返回成功時(shí)自動(dòng)調(diào)用該函數(shù)。
最后寫一個(gè)$.get()的實(shí)例供大家參考:
$.get(
"submit.aspx",{
id: '123',
name: '青藤園',
},function(data,state){
//這里顯示從服務(wù)器返回的數(shù)據(jù)
alert(data);
//這里顯示返回的狀態(tài)
alert(state);
}
)
2、$.post()
$.post()方法使用POST方式來進(jìn)行異步請(qǐng)求,它的語(yǔ)法結(jié)構(gòu)為:
$.post(url,[data],[callback],[type])
這個(gè)方法和$.get()用法差不多,唯獨(dú)多了一個(gè)type參數(shù),那么這里就只介紹type參數(shù)吧,其他的參考上面$.get()的。
type:type為請(qǐng)求的數(shù)據(jù)類型,可以是html,xml,json等類型,如果我們?cè)O(shè)置這個(gè)參數(shù)為:json,那么返回的格式則是json格式的,如果沒有設(shè)置,就和$.get()返回的格式一樣,都是字符串的。
最后寫一個(gè)$.post()的實(shí)例供大家參考:
$.post(
"submit.aspx",{
id: '123',
name: '青藤園',
},function(data,state){
//這里顯示從服務(wù)器返回的數(shù)據(jù)
alert(data);
//這里顯示返回的狀態(tài)
alert(state);
},
"json"
)
3、$.getJSON()
$.getJSON()是專門為ajax獲取json數(shù)據(jù)而設(shè)置的,并且支持跨域調(diào)用,其語(yǔ)法的格式為:
getJSON(url,[data],[callback])
url:string類型, 發(fā)送請(qǐng)求地址 data :可選參數(shù), 待發(fā)送 Key/value 參數(shù) ,同get,post類型的data callback :可選參數(shù),載入成功時(shí)回調(diào)函數(shù),同get,post類型的callback
JSON是一種理想的數(shù)據(jù)傳輸格式,它能夠很好的融合與JavaScript或其他宿主語(yǔ)言,并且可以被JS直接使用。使用JSON相比傳統(tǒng)的通過 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ù)可以通過把請(qǐng)求url寫 成"myurl?callback=X"這種格式,讓程序執(zhí)行回調(diào)函數(shù)X。
4、$.ajax()
$.ajax()是jquery中通用的一個(gè)ajax封裝,其語(yǔ)法的格式為:
$.ajax(options)
其中options是一個(gè)object類型,它指明了本次ajax調(diào)用的具體參數(shù),這里我把最常用的幾個(gè)參數(shù)附上
$.ajax({
url: 'submit.aspx',
datatype: "json",
type: 'post',
success: function (e) { //成功后回調(diào)
alert(e);
},
error: function(e){ //失敗后回調(diào)
alert(e);
},
beforeSend: function(){ /發(fā)送請(qǐng)求前調(diào)用,可以放一些"正在加載"之類額話
alert("正在加載");
}
})
以上就是jquery實(shí)現(xiàn)ajax調(diào)用的幾種方法,ajax調(diào)用還是挺復(fù)雜的,希望本文能對(duì)大家有所幫助,如有什么疑問,也可以聯(lián)系我,大家共同進(jìn)步。
- jQuery中ajax的load()與post()方法實(shí)例詳解
- jQuery中ajax - get() 方法實(shí)例詳解
- jquery中g(shù)et,post和ajax方法的使用小結(jié)
- jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫法
- jQuery中Ajax的get、post等方法詳解
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
- jQuery中ajax的get()方法用法實(shí)例
- jQuery中ajax的load()方法用法實(shí)例
- 詳談jQuery Ajax(load,post,get,ajax)的用法
相關(guān)文章
jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
這篇文章主要介紹了jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起的功能,實(shí)例分析了jQuery中slideUp方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法
本篇文章主要是對(duì)jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02
Jquery多選框互相內(nèi)容交換的實(shí)例代碼
這篇文章介紹了Jquery多選框互相內(nèi)容交換的實(shí)例代碼,有需要的朋友可以參考一下2013-07-07
jQuery基于cookie實(shí)現(xiàn)的購(gòu)物車實(shí)例分析
這篇文章主要介紹了jQuery基于cookie實(shí)現(xiàn)購(gòu)物車的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery基于cookie實(shí)現(xiàn)針對(duì)商品信息的購(gòu)物車存儲(chǔ)功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
jquery實(shí)現(xiàn)簡(jiǎn)單的二級(jí)導(dǎo)航下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的二級(jí)導(dǎo)航下拉菜單效果,涉及jquery鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式及Ajax調(diào)用的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景
今天在項(xiàng)目中用到了一個(gè)很好的div彈出層效果,jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景,效果非常棒,拿出來和大家一起分享!2015-04-04
jQuery+css3實(shí)現(xiàn)Ajax點(diǎn)擊后動(dòng)態(tài)刪除功能的方法
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)Ajax點(diǎn)擊后動(dòng)態(tài)刪除功能的方法,可實(shí)現(xiàn)點(diǎn)擊選區(qū)后出現(xiàn)選區(qū)收縮、滾動(dòng)消失的效果,涉及jquery結(jié)合Ajax與數(shù)學(xué)運(yùn)算實(shí)時(shí)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2015-08-08
jquery 查找select ,并觸發(fā)事件的實(shí)現(xiàn)代碼
項(xiàng)目中,用jquery 查找select ,并觸發(fā)事件. 記一筆.關(guān)鍵代碼,需要的朋友可以參考下。2011-03-03

