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 = "" + comment.id + comment.NickName + "来自" + comment.CommentIP + " " + comment.CommentDate + "" + comment.CommentBody + ""
                       $("#divCommentList").append(span);
                   }
               }
           );
       }

以看到 ajax 请求页面为 /Ajax/Elec_Comment/GetData.aspx ,传过去2个参数，pid 是对应的产品ID（此示例演示的是 产品 评论的无刷新效果实现）,还有一个page 参数，表示 当前页码。首页加载 page=1 ,当点击分页页码之后传过去的 page 值 是从 a 标签的 title 属性中读取。具体如何实现请参考上一篇文章  传送门

jquery 的 post 方法 会返回请求结果，如上代码 中 的  data .这个 data 返回的是一个 json 格式的数据。他是一个 List 泛型集合。

$("#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 list = new List();
            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 泛型。返回之后由于序列化的原因。DataTime 类型的数据我不晓得要怎么解析，干脆直接返回字符串形式的。于是新建一个类 commm ，类结果和 产品评论 实体类 结果差不多，只是省略掉了页面上用不到的数据。

取出来的 DataTable 数据通过 遍历 添加到 了 List 集合中。。然后将List集合序列化为 Json 对象 返回给客户端，代码如下

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