透過jQuery的Ajax，呼叫server端的aspx，回傳JSON格式的資料

前言
如同標題的關鍵字一般，『jQuery, Ajax, aspx, JSON』，這一篇文章用個簡單的範例來說明這幾個東西怎麼串起來。

需求與步驟

1. Sample.aspx上按一個HTML Button。
2. 用GET方式，向JSON.aspx發送Request。
3. JSON.aspx回傳的資料格式需轉成JSON。
4. Ajax接到回傳的JSON資料後，呈現在<div>裡面。

Sample Code

1. Sample.aspx：
(1)使用$.ajax
(2)使用GET方式呼叫aspx
(3)Ajax成功時，使用$.parseJSON來把data字串轉成array
(4)使用$.each()將每一個element組成html。（這邊可以先組好html，再做一次塞給#result）

2.JSON.aspx：

(1)若使用aspx來回傳，請將.aspx上的所有html移除，只留下第一個Page指示詞就好。

3.JSON.aspx.cs：

(1)在Page_Load裡面（其實可以在Page_Init，應該會更快一點點）。
(2)透過JavaScriptSerializer來將要回傳的集合序列化成JSON格式。
(3)透過Response.Write()來回傳資料。
(4)回傳完資料，呼叫Response.End()結束這個Request。

 

結論 
這麼簡單的範例，就是為了凸顯一些基本觀念的應用。希望對那些還不熟悉jQuery, ajax, JSON的朋友，能有所幫助。能幫助他們不再被postback綁住。

Source Code：JSON.zip




詳細文章內容請看這