内容来自:http://www.dotblogs.com.tw/hatelove/archive/2011/11/22/jquery-ajax-aspx-json.aspx
前言
如同標題的關鍵字一般,『jQuery, Ajax, aspx, JSON』,這一篇文章用個簡單的範例來說明這幾個東西怎麼串起來。
需求與步驟
- Sample.aspx上按一個HTML Button。
- 用GET方式,向JSON.aspx發送Request。
- JSON.aspx回傳的資料格式需轉成JSON。
- Ajax接到回傳的JSON資料後,呈現在<div>裡面。
Sample Code
1. Sample.aspx:
(1)使用$.ajax
(2)使用GET方式呼叫aspx
(3)Ajax成功時,使用$.parseJSON來把data字串轉成array
(4)使用$.each()將每一個element組成html。(這邊可以先組好html,再做一次塞給#result)
01 <htmlxmlns="http://www.w3.org/1999/xhtml">
02 <headrunat="server">
03 <title></title>
04 <scriptsrc="//code.jquery.com/jquery-1.6.1.js"type="text/javascript"></script>
05 <scripttype="text/javascript">
06 $(document).ready(function () {
07 $('#btnTrigger').bind('click', function () {
08 $.ajax(
09 {
10 type: "GET",
11 url: "Json.aspx",
12 success: function (data) {
13 var myarray = $.parseJSON(data);
14 $.each(myarray, function (i, item) {
15 var content = "index:" + i + "; Name: " + item.Name + "; Id: " + item.Id;
16 var li = "<li>" + content + "</li>";
17 $('#result').append(li);
18 });
19 }
20 });
21 });
22 });
23
24 </script>
25 </head>
26 <body>
27 <formid="form1"runat="server">
28 <div>
29 <inputid="btnTrigger"type="button"value="trigger ajax"/>
30 <div>
31 <ulid="result">
32 </ul>
33 </div>
34 </div>
35 </form>
36 </body>
37 </html>
2.JSON.aspx:
(1)若使用aspx來回傳,請將.aspx上的所有html移除,只留下第一個Page指示詞就好。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Json.aspx.cs" Inherits="Json" %>
3.JSON.aspx.cs:
(1)在Page_Load裡面(其實可以在Page_Init,應該會更快一點點)。
(2)透過JavaScriptSerializer來將要回傳的集合序列化成JSON格式。
(3)透過Response.Write()來回傳資料。
(4)回傳完資料,呼叫Response.End()結束這個Request。
|
結果畫面
結論
這麼簡單的範例,就是為了凸顯一些基本觀念的應用。希望對那些還不熟悉jQuery, ajax, JSON的朋友,能有所幫助。能幫助他們不再被postback綁住。