jQuery-Ajax-POST

jQuery-Ajax-POST

這邊用ajax 的方式將資料POST到另一個頁面做處理。

1.  jQuery (PageA)

var postUrl = "PageB.aspx?XX=123&YY=456";

$.ajax({
            url: postUrl,
            type: "POST",
            data: JSON.stringify({ 'Summarys': dataList }),
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            //timeout: 10000,
            success: function (data, status) {
            },
            error: function (jqXHR, textStatus, err) {
                console.log("Error : " + jqXHR.toString());
                console.log("Error : " + textStatus.toString());
                console.log("Error : " + err.toString());
            }
});

2.  ASPX.cs in PageB

u  Page load

protected void Page_Load(object sender, EventArgs e)
{
    ///取得Url參數
    String xx = Request.QueryString["XX"];
    String yy = Request.QueryString["YY"];

    ///處理Request, 取得前端POST back的資料
    List<Summary> summaryList = this.ProcessRequest();
}

※ 這邊要注意，前端如果回傳一個物件的Json，後端可以直接使用同一個物件去Deserialize。 但是如果是同一個物件的集合，那麼我們會發現無法直接Deserialize成List<objectA>， 必須用另一個物件B去包一個List<objectA>的property，再Deserialize成B。 請參考下面的黃色底部分程式碼 …

u  Get the request data and deserialize

/// <summary>
/// Handle the post request
/// </summary>
public List<Summary> ProcessRequest()
{
    SummaryList summaryList = null; ///包含List<Summary>
    try{
       ///將Json資訊寫入DeclareModifySummaryList object
       System.IO.Stream body = Request.InputStream;
       System.Text.Encoding encoding = Request.ContentEncoding;
       System.IO.StreamReader reader = new System.IO.StreamReader(body, encoding);
       string json = reader.ReadToEnd();
       JavaScriptSerializer serializer = new JavaScriptSerializer();
       summaryList = serializer.Deserialize<SummaryList>(json);
       return summaryList.Summarys;
    }
    catch (Exception){ throw; }
}

u  SummaryList Class :

public class SummaryList
{
   public List<Summary> Summarys { get; set; }
}

u  Response message from Server side
如果需要回覆前端訊息，則在Page_Load的最後，加上
this.Response.Write(new JavaScriptSerializer().Serialize(“訊息內容”));

3.      結論：
由ajax POST到另一頁面，可一次POST back大量的資料，而且也可以利用Request的方法取得Form、url的資訊和參數，