jquery Ajax 方法返回資料的擷取,包括JSON,XML,TXT

來源:互聯網
上載者:User
JQuery提供了一系列的全域方法對XMLHttpRequest對象進行了封裝,在進行Ajax開發過程中再也不用擔心瀏覽器用戶端的不致性問題了。

一、$.ajax(options)
它是最根本的JQuery Ajax方法,它只有一個參數options,該options參數中包含了請求資訊和回呼函數的資訊。參數內容都是key:value對形式出現,並且都是可選的。
文法:
$.ajax({options});
url
:(string)發送請求的地址,可以是伺服器頁面也可以是WebService動作。
type:(string)請求方式,POST或GET
data:(object)向伺服器發送請求時帶去的資料。是key:value對形式,如:{name:"grayworm",sex:"male"},如果是數組{works:["work1","work2"]}
dataType:(string)預期返回的資料類型。xml,html,json,text等
beforeSend:(Function)發送ajax請求前被觸發,如果返回false則取消本次請求。如果非同步請求需要顯示gif動畫,那應當在這裡設定相應<img>的可見。
function(XMLHttpRequest){ }

complete:(Function)請求調用完成後的回呼函數(請求成功或失敗時均調用),如果非同步請求顯示gif動畫,那應當在這裡設定相應的<img>不可見。
function(XMLHttpRequest,textStatus){
   //textStatus是描述返回狀態的字串
}

success:(Function)請求執行成功時的回呼函數
function(data,textStatus){
   //data是服務端返回的資料可以是xml、json、text等格式
   //textStatus是描述返回狀態的字串
}

error:(Function)請求執行失敗時的回呼函數
function(XMLHttpRequest,textStatus,errorThrown){
   //data是服務端返回的資料可以是xml、json、text等格式
   //textStatus,errorThrown是描述返回狀態的資訊
}

應用舉例:
1.向頁面發出請求,返回XML格式資料
頁面端代碼:


《圖3》
JQuery代碼:


《圖1》

2.向頁面發出請求,返回Json格式資料
頁面端代碼:


《圖4》
JQuery代碼:


《圖2》

3.向WebService發出請求,無參返回簡單類型非同步呼叫
服務端代碼:


《圖5》
JQuery代碼:


《圖6》

4.向WebService發出請求,有參返回簡單類型異就調用
服務端代碼:


《圖7》
JQuery代碼:


《圖8》

5.向WebService發出請求,返回實體物件的非同步呼叫
服務端代碼:


《圖9》
JQuery代碼:


《圖10》

6.向WebService發出請求,返回集合對象的非同步呼叫
服務端代碼:


《圖11》
JQuery代碼:


《圖12》

說明:
        WebService請求類型都為Post,WebService的Url為“[WebServiceUrl]/[WebMethod]”
        data要用Json的字串格式傳入
        設定了dataType為json後,result就直接為返回的Json對象。

二、$.get()和$.post()
$.ajax()是最基本的Ajax方法,在JQuery中又提供了兩個簡捷的Ajax調用方法$.get()和$.post(),這兩個方法實現了對$.ajax()的封裝。有了$.ajax()的基礎,下面兩個方法學習起來就很簡單了。
1.$.get()
文法:
$.get(url [,data] [,callback] [,type])
url:(string)請求的HTML頁的URL地址
data:(object)發送到伺服器的資料,以key/value對形式書寫,如:{name:"張三",age:"18"}
callback:(function)回呼函數,只有返回的狀態是success時才調用該方法。
type:(string)服務端返回的內容的格式。xml,html,json,text等

2.$.post()
文法:
$.post(url [,data] [,callback] [,type])
url:(string)請求的HTML頁的URL地址
data:(object)發送到伺服器的資料,以key/value對形式書寫,如:{name:"張三",age:"18"}
callback:(function)回呼函數,只有返回的狀態是success時才調用該方法。
type:(string)服務端返回的內容的格式。xml,html,json,text等

$.post()與$.get()很相似,只是資料參數傳遞方式不一樣,這二者與傳統的get/post提交方式相同。

應用舉例:
1.$.get()和$.post()向頁面發送非同步請求,返回XML資料
服務端代碼:


《圖3》
JQuery代碼:


《圖13》

2.$.get()和$.post()向頁面發送非同步請求,返回json資料
服務端代碼:


《圖4》
JQuery代碼:


《圖14》
3.$.get()和$.post()向WebService發送非同步請求


《圖15》:

三、序列化元素
如果頁面表單元素比較多,在發出ajax請求的時候需要將表單中所有的元素一起發送到服務端,如果還是使用key/value對形式的json文法傳遞參數的話,那需要在$.get()或$.post()中手寫很長的json參數。
在JQuery中為我們提供了序列化的方式來解決這個問題,序列化的方法是serialize()
範例程式碼:


《圖16》


《圖17》

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.