深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

來源:互聯網
上載者:User
轉自於:深入理解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()的執行個體供大家參考:

$.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()返回的格式一樣,都是字串的。

最後寫一個$.post()的執行個體供大家參考:

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

3、$.getJSON()

$.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調用的具體參數,這裡我把最常用的幾個參數附上

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

好了,以上就是jquery實現ajax調用的幾種方法,希望對大家有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.