ajax之无刷新分页

来源:互联网 发布:linux安装weblogic 编辑:程序博客网 时间:2024/03/29 15:49

 

(一)前台

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

</head>
<body>

<ul id="ulContent"></ul>

<table>

<tr id="trPage">

</tr>

</table>

    <script type="text/javascript">

        //首先在页面加载完以后去申请所有的页面数
        $.post("/07无刷新分页/PageService.ashx", { "action": "getpagetcount" }, function (data, status) {

            for (var i = 0; i <= data; i++) {
                var td = $("<td><a href=''>" + i + "</td>"); //创建一个li标签
                $("#trPage").append(td); //把td标签添加到tr标签中
            }

            //当点击tr标签中的td标签的时候进行的逻辑处理
            $("#trPage td").click(function (e) {

                e.preventDefault(); //不要导向链接地址

                //下面进行一个Ajax请求

                //$.post("/07无刷新分页/PageService.ashx", { "action": "getpagedata", "pagenum": "1" }, //传递一个action参数,这里传送的1相当于是一个占位符,真正替换到时候使用innerText

                $.post("/07无刷新分页/PageService.ashx", { "action": "getpagedata", "pagenum": $(this).text() }, //传递一个action参数,再传送当前页数参数即innerText

        function (data, status) {
            var comments = $.parseJSON(data); //拿到后台传过来的List数据

            //$("#ulContent li").empty();//把UL标签下的li标签内容清空

            $("#ulContent").empty(); //把UL标签标签内容清空

            for (var i = 0; i < comments.length; i++) {//遍历得到的数组的长度
                var comment = comments[i]; //得到数组中的元素
                var li = $("<li>" + comment.postDate + ":" + comment.msg + "</li>"); //使用Jquery创建一个UL标签

                $("#ulContent").append(li); //把创建的li标签添加到Ul标签中
                    }
        });


            });


        });

 
    </script>
</body>
</html>

(二)后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using _13ajax.DataSetCommentTableAdapters;
using System.Web.Script.Serialization;

namespace _13ajax._07无刷新分页
{
    /// <summary>
    /// PageService 的摘要说明
    /// </summary>
    public class PageService : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string action= context.Request["action"];//得到前台传送过来的action参数

            if (action=="getpagecount")//如果传送过来的参数是获得页面总数的参数的时候
            {
                var adapter = new T_WSXFYCommentTableAdapter();
                //int count = adapter.SelectCount();//得到的总数的值是可空类型
                int count = adapter.SelectCount().Value;//把得到的可空类型的数据转换为int类型

                int pagecount = count / 10;  //注意一个细节:3/10=0,让我想起苏坤老师讲解进度条的时候的算法问题,施峻峰也和我提到过药品的分币差问题

                //数据情况讨论
                //3条,9条,11条
                //count/10

                if (count % 10 != 0)
                {
                    pagecount++;
                }
                context.Response.Write(pagecount);//打印出总页数的字段
            }

            if (action == "getpagedata")
            {
                string pagenum=context.Request["pagenum"];//得到页面数参数
                int iPageNum = Convert.ToInt32(pagenum);//得到传过来的页码数


                var adapter = new T_WSXFYCommentTableAdapter();
                var data = adapter.GetPageDate((iPageNum - 1) * 10 + 1, (iPageNum) * 10);

                //对数据进行处理
                List<Comment> list = new List<Comment>();
                foreach (var row in data)//表里的得到的DataTable中的DataRow
                {
                    //list.Add(new Comment() { PostDate=row.postDate,Msg=row.msg });

                    list.Add(new Comment() { PostDate = row.postDate.ToShortDateString(), Msg = row.msg });
                }//to do:用linq更简单

                JavaScriptSerializer jss = new JavaScriptSerializer();

                //原来的代码:前台序列化不了的数据类型
                //context.Response.Write( jss.Serialize(data) );

                context.Response.Write(jss.Serialize(list));//刚才的DataTable类型的数据放到list中去然后打印到出来
               
            }
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

 

        //声明一个Comment类用来装两个属性
        public class Comment
        {
            //public DateTime PostDate { get; set; }//如果传入的是DateTime类型的属性的话会报错

            public string PostDate { get; set; }
            public string Msg { get; set; }

        }

 

    }
}

 

 

 

 

 

原创粉丝点击