深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
原創文章,歡迎轉載,轉載請註明出處,謝謝合作
當我們用javascript寫ajax程序寫得很“開心”的時候,突然有人告訴你有一種東西叫jquery,它會告訴你不直接和HttpRequest是多麼的快樂,同時你再也不需要再煩惱糾結的ajax亂碼問題,更幸福的是你的js代碼將大大地簡化,看完本文,你會發現,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()的實例供大家參考:
1
2
3
4
5
6
7
8
9
10
11
|
$.get( "submit.aspx" ,{ id:
'123' , name:
'青藤園' , }, function (data,state){ //這裏顯示從服務器返回的數據 alert(data); //這裏顯示返回的狀態 alert(state); } ) |
$.post()方法使用POST方式來進行異步請求,它的語法結構爲:
$.post(url,[data],[callback],[type])
這個方法和$.get()用法差不多,唯獨多了一個type參數,那麼這裏就只介紹type參數吧,其他的參考上面$.get()的。
type:type爲請求的數據類型,可以是html,xml,json等類型,如果我們設置這個參數爲:json,那麼返回的格式則是json格式的,如果沒有設置,就和$.get()返回的格式一樣,都是字符串的。
最後寫一個$.post()的實例供大家參考:
1
2
3
4
5
6
7
8
9
10
11
12
|
$.post( "submit.aspx" ,{ id:
'123' , name:
'青藤園' , }, function (data,state){ //這裏顯示從服務器返回的數據 alert(data); //這裏顯示返回的狀態 alert(state); }, "json" ) |
$.getJSON()是專門爲ajax獲取json數據而設置的,並且支持跨域調用,其語法的格式爲:
getJSON(url,[data],[callback])
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調用的具體參數,這裏我把最常用的幾個參數附上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$.ajax({ url:
'submit.aspx' , datatype:
"json" , type:
'post' , success:
function (e) {
//成功後回調 alert(e);
}, error:
function (e){
//失敗後回調 alert(e); }, beforeSend:
function (){ /發送請求前調用,可以放一些 "正在加載" 之類額話 alert( "正在加載" ); } }) |