jQuery Ajax : 從後端取得資料

jQuery Ajax : 從後端取得資料

1.  Get 網頁的內容 (以json格式)

u  ASPX : 將html的內容移除，只保留 <%@ Page … %> 的宣告即可。

u  ASPX codebehide : 將回傳的內容 Response 在 Page_Load事件。

protected void Page_Load(object sender, EventArgs e)
{
   String[] s1 = new String[13] { "Test1", "10210"};
   String[] s2 = new String[13] { "Test2", "10210"};
   List<Summary> summaryList = new List<Summary>(){
       new Summary(s1),
       new Summary(s2)
   };
  
   JavaScriptSerializer serializer = new JavaScriptSerializer();
   String jsonStr = serializer.Serialize(summaryList);
   Response.Write(jsonStr);
   Response.End();
}

u  前端jQuery :
$.ajax({
          url: "Selector_GetData.aspx",
          type: "GET",
          dataType: "json",
          success: function (Jdata) {
               $.each(Jdata, function (key, val) {
                       var content = val.DispName + ":" + val.DeclareModifyDate;
                       console.log(content);
               });
          },
          error: function (jqXHR, textStatus, err) {
             alert("Error : " + err.toString());
          }
});

u  結果：
Test1:10210
Test2:10210

u  備註：
如果需要帶一些參數，可利用URL參數，再於提供Get方法的頁面Page_Load的時候，使用Request.QueryString去取得即可。

2.  Thru Web Service (WebMethod)

u  ASPX.cs : 建立一個WebMethod
[WebMethod]
public static List<Summary> GetData(ComInfo comInfo)
{
       String x = comInfo.ComOID;
       String y = comInfo.PeriodNo;
       String[] s1 = new String[13] { "Test1", "10210" };
       String[] s2 = new String[13] { "Test2", "10210" };
       List<Summary> summaryList = new List<Summary>(){
           new Summary(s1),
           new Summary(s2)
       };
       return summaryList;
}

※ 注意WebMethod必須為宣告為 static!
※ 可直接retrun 物件或集合， 前偳在呼叫此WebMethod時，可指定以json或xml回傳物件。

u  前端jQuery :  可Post back data, 例如下例的var data

var data = { 'ComOID': 'XXX', 'PeriodNo': 'YYY'};
$.ajax({
               url: "Selector.aspx/GetData",
               type: "POST",
               //data: "{'ComOID':'XXX','PeriodNo':'YYY'}",
               data: JSON.stringify({'comInfo':data}),
               contentType: 'application/json; charset=utf-8',
               dataType: "json",
               timeout: 5000,
               success: function (Jdata, status) {
                    $.each(Jdata.d, function (key, val) {
                       var content = val.DispName + ":" + val.DeclareModifyDate;
                       console.log(content);
                   });
               },
               error: function (jqXHR, textStatus, err) {
                    console.log("Error : " + jqXHR.toString());
                    console.log("Error : " + textStatus.toString())
                    console.log("Error : " + err.toString());
               }
        });※ 請將要POST back的JSON物件加上參數的變數名稱（此例是comInfo）， 最後用大括號包起來。
※ POST Url = Page name/WebMethod name
※ 請注意到透過此方式回傳的JSON物件，會自動將回傳內容再設定給一個d物件，詳情請參考  A breaking change between versions of ASP.NET AJAX
   所以實際內容請指到Jdata.d

u  結果：
Test1:10210
Test2:10210

u  備註：
※ 因為WebMethod是static方法，所以基本上一些Request, Response的方法都不能使用。

3.  結論
以上是兩種簡易的jQuery取得資料方法，
第一種方式適用於下條件式的查詢，因為只能由URL帶回參數回後端。
第二種方式可直接POST back 條件或資料，比較方便，但是缺點是static方法衍生的限制。
下一篇文章會利用Ajax Post back到其他頁面，可做更進階的應用。

4.  Reference
A breaking change between versions of ASP.NET AJAX
jQuery AJAX Call for posting data to ASP.Net page ( not Get but POST)
Deserialize JSON array(or list) in C#