基于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,希望见谅，各位高手如果有更好的建议请提交评论，感激不尽！！
