在上一篇中寫到了利用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();

　　 到此。一個無刷新分頁的效果就實現了。