[c#]asp.net+jQuery+json做Ajax

Ajax常用在網頁單獨某一區塊的內容更新,不需要整頁網頁重新整理就可以得到區塊內容的更新,而常用與Web-Server做資料交換的格式有純文字、Parameter(key=value)、XML或是json等,而json為最常使用的格式之一,它不像XML格式,需要開始Tag與結束Tag,只需要利用Key,Value的方式來進行資料的設定,比XML更為簡單、內容大小更為精簡,詳細內容及方法可以參考http://www.json.org/

asp.net(使用c sharp)使用jQuery實作Ajax與伺服器溝通。

建立Web服務器asmx

利用Web服務器的函數(方法)來處理Ajax的需求及回應

要使用Ajax呼叫Web服務,需要把System.WebScript.Services.SrciptService這行的mark拿掉才可以。

Web服務

再來建立相對應的函數(方法),Ajax呼叫的網頁會是getData.asmx/函數(方法)

如需要共用Session內容,則需在WebMethod加上enableSession:true才可

WebMethod Session:true




另一個範例,使用request來取得Ajax傳來的POST及GET二種方法的資料,而使用Response來回傳處理過後json格式資料。

  1. 回傳json格式需設定檔頭header的contentType為application/jsp,否則會被設定為xml格式
  2. 取得post資料使用the.Context.Request.Form[key名稱]
    取得Get資料則使用the.Context.Response.QueryString[key名稱]
  3. 利用Dictionary來設定及存放要回應的資料
  4. 使用JavaScriptSerializer來序列化dictionary內容,會自動產生json格式,不使用return而需使用Response.Write內容才可。

request及reponse

原始碼:

asp.net網頁內容

建立四個按鈕及一個顯示資料的區塊

範例按鈕

撰寫jQuery Ajax動作

Session相關的範例因為回傳的資料型態預設為xml,所以需要利用jQuery來解析XML,而url的參數則設定成getData.asmx/方法(函數)

jQuery處理XML

另一範例則是傳送了get及post內容給Web服務,取出後再組合成json格式回傳到網頁端,因為回傳格式為json,所以可以直接使用response.keyName來取得Value

jQuery處理json

程式碼:

實際操作

設定Session

回傳格式為預設的xml格式,利用jQuery解析後取出string的值,顯示於div內

設定Session及回傳xml內容

因為前一個動作有設定Session,所以可以取得Session[“test”]的值

顯示Session回傳xml內容

把剛才設定的Session移除remove掉

移除Session內容

再顯示一次Session的內容,資料為空

顯示被移除後的Session內容

傳送GET及POST資料,再回傳json格式,顯示於div上

利用Get及Post取得json格式內容

參數部份為GET傳送之內容

GET參數內容

Post部份為POST傳送之內容

POST參數內容

程式碼下載

Xuite WehHD

One comment on “[c#]asp.net+jQuery+json做Ajax

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*