Json的Ajax無重新整理分頁效果

Json的Ajax無重新整理分頁效果

這一篇我講接著寫利用json讀取資料以及和分頁器綁定實現無重新整理的分頁效果
//根據當前頁讀取資料

       function BindCommentList(page) {
           $.post("/Ajax/Elec_Comment/GetData.asp教程x", { pid: '<%=DotNet.Framework.Common.QueryString.QId("id") %>', page: page },
               function(data) {
                   var Comments = $.parseJSON(data);
                   $("#divCommentList").empty();
                   for (var i = 0; i < Comments.length; i++) {
                       var comment = Comments[i];
                       var span = "<span class="hsk"><span>" + comment.id + comment.NickName + "</span><span>來自" + comment.CommentIP + "</span> <span>" + comment.CommentDate + "</span></span><span class="pl_text">" + comment.CommentBody + "</span>"
                       $("#divCommentList").append(span);
                   }
               }
           );
       }

以看到 ajax 請求頁面為 /Ajax/Elec_Comment/GetData.aspx ,傳過去2個參數，pid 是對應的產品ID（此樣本示範的是 產品 評論的無重新整理效果實現）,還有一個page 參數，表示 當前頁碼。首頁載入 page=1 ,當點擊分頁頁碼之後傳過去的 page 值 是從 a 標籤的 title 屬性中讀取。具體如何?請參考上一篇文章  傳送門

jquery 的 post 方法 會返回請求結果，如上代碼 中 的  data .這個 data 返回的是一個 json 格式的資料。他是一個 List<T> 泛型集合。

$("#divCommentList").empty();  是清空 評論列表的 div 中的內容。。然後遍曆 返回結果。 利用 json 將返回資料 解析 並且拼接成 html  最後重新追加到 divCommentList div 中。 。。。

public partial class GetData : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            int page = DotNet.Framework.Common.QueryString.StrToId(DotNet.Framework.Common.QueryString.F("page"));
            int pid = DotNet.Framework.Common.QueryString.StrToId(DotNet.Framework.Common.QueryString.F("pid"));
            GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment bll = new GSSS.HTML.BLL.PromotionZone.ElectronicProducts.T_ElectronicProducts_Comment();
            if (page == 0)
            {
                page = 1;
            }
            DataSet data = bll.GetPageData(page, pid);
            List<commm> list = new List<commm>();
            if (data == null || data.Tables.Count == 0 || data.Tables[0].Rows.Count == 0)
            {
                Response.Write("暫無評論");
                Response.End();
            }
            commm model = null;
            foreach (DataRow row in data.Tables[0].Rows)
            {
                model = new commm()
                {
                    CommentBody = row["CommentBody"].ToString(),
                    CommentIP = row["CommentIP"].ToString(),
                    CommentDate = row["CommentDate"].ToString(),
                    CommentRate = row["CommentRate"].ToString(),
                    Email = row["Email"].ToString(),
                    id = row["id"].ToString(),

                    NickName = row["NickName"].ToString(),
                    ProdictID = row["ProdictID"].ToString(),

                };

                list.Add(model);
            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            Response.Write(jss.Serialize(list));
            Response.End();
        }
    }
    public class commm
    {
        public string CommentBody { get; set; }
        public string CommentIP { get; set; }
        public string CommentDate { get; set; }
        public string CommentRate { get; set; }
        public string Email { get; set; }
        public string id { get; set; }
        public string NickName { get; set; }
        public string ProdictID { get; set; }
    }

評論中有 評論時間 欄位。。他是 DataTime 類型，起初本想直接從資料庫教程中讀取 DataTable 序列化成 Json對象返回，發現無法轉換，後來換成 List<T> 泛型。返回之後由於序列化的原因。DataTime 類型的資料我不曉得要怎麼解析，乾脆直接返回字串形式的。於是建立一個類 commm ，類結果和 產品評論 實體類 結果差不多，只是省略掉了頁面上用不到的資料。

取出來的 DataTable 資料通過 遍曆 添加到 了 List 集合中。。然後將List集合序列化為 Json 對象 返回給用戶端，代碼如下

JavaScriptSerializer jss = new JavaScriptSerializer();
            Response.Write(jss.Serialize(list));
            Response.End();