基於Json的Ajax無重新整理分頁效果實現（二）

在上一篇中寫到了利用jquery 的ajax方式讀取分頁器頁碼顯示到頁面上。這一篇我講接著寫利用json讀取資料以及和分頁器綁定實現無重新整理的分頁效果。

在上一篇中 寫到 頁面的js 中有個 BindCommentList(1);//頁面載入預設綁定第一頁資料 方法。參數為當前頁碼。頁面首次載入賦預設值1，即載入第一頁的資料。

然後在 分頁器 中 a 標籤 點擊的時候還會 觸發 BindCommentList js事件。參數就從 點擊的 a 標籤 的屬性 title 取值，表示頁碼，BindCommentList 事件代碼如下：

 //根據當前頁讀取資料        function BindCommentList(page) {            $.post("/Ajax/Elec_Comment/GetData.aspx", { 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 中。 。。。

接下來看一下 ajax 方法請求的頁面  /Ajax/Elec_Comment/GetData.aspx  如何?將查詢出來的列表 序列化為 json 對象  代碼如下：

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();

到此。一個無重新整理分頁的效果就實現了，因為是我們正在做的項目，所以無法提供Demo,希望見諒，各位高手如果有更好的建議請提交評論，感激不盡！！