分页学习---AJAX分页

最新推荐文章于 2024-11-12 23:16:45 发布

极_晓

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量413

点赞数

分类专栏： JavaScript SQL-Server asp-net 文章标签： jquery html ajax 分页 json

本文链接：https://blog.csdn.net/x1032019725/article/details/52921576

版权

asp-net 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

SQL-Server

2 篇文章 0 订阅

订阅专栏

要点

思路
核心代码
AJAX优缺点
总结

用到的知识：html+js+jQuery+一般处理程序（.ashx）
ajax分页思路：
在首次加载页面的时候，通过一般处理程序（.ashx）从数据库中取出第1~pagesize（自己定义）条数据，然后获取页码条，当点击下一页或者页码条上指定页码时，使用ajax向一般处理程序提交一个post请求（get也可以），获取指定页的数据并以json的格式返回数据，更新页码条

核心代码
1、前端代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <script type="text/javascript">

        $(function () {
        //初次加载调用，显示第一页的数据
            LoadList(1);
        })
        //------------------AJAX主要代码块------------
               //AJAX加载用户列表
        function LoadList(pageindex) {
            //post请求LoadList.ashx
            $.post("LoadList.ashx", { "pageindex": pageindex }, function (data) {
                //把数据转成json对象，默认是text
                var serverdata = $.parseJSON(data);
                var serverdatalength = serverdata.UList.length;
                for (var i = 0; i < serverdatalength; i++) {
                    $("<tr><td>" + serverdata.UList[i].UID + "</td><td>" + serverdata.UList[i].uname + "</td><td>" + serverdata.UList[i].uaccount + "</td><td>" + serverdata.UList[i].uemial + "</td><td>" + ChangeDateFormat(serverdata.UList[i].addtime) + "</td><td><a href='javascript:void(0)' class = 'delete' dId='" + serverdata.UList[i].UID + "' >删除</a></td><td><a href='javascript:void(0)' class='detail' nId = '" + serverdata.UList[i].UID + "'>详细</a></td><td><a href='javascript:void(0)' class='edit' tId='" + serverdata.UList[i].UID + "' >编辑</a></td></tr>").appendTo("#listtable");

                }
                //获取页码条并追加到id为pagebar的div中
                $("#pagebar").html(serverdata.PageBar);
                PageBar();
            });
          }
        //-----------------end主要代码块------------
         //显示页码条
        function PageBar()
        {
            //为所有clss属性为pages的a标签添加点击事件
            $(".pages").click(function () {
                var pageindex = $(this).attr("href").split("=")[1];
                //清除之前的表格数据
                $("#listtable tr:gt(0)").remove();
                LoadList(pageindex);
                //不发生跳转
                return false;
            });
        }

       </script>
</head>
<body>
    <form >
     <table id="listtable">
            <tr><th>ID</th><th>姓名</th><th>账号</th><th>email</th><th>添加时间</th><th>删除</th><th>详细</th><th>编辑</th></tr>

        </table>
        <div class="page" id="pagebar"></div>
    </form>
</body>
</html>

LoadList.ashx核心代码

 public void ProcessRequest(HttpContext context)
        {

            context.Response.ContentType = "text/plain";
            //三层架构中的BLL层对象
            uInfoBLL ubll = new uInfoBLL();
            int pageindex;
            //获取传过来的pageindex，post和get都是使用context.Request["name"],其会自动识别是post还是get请求
            if(!int.TryParse(context.Request["pageindex"],out pageindex))
            {
                pageindex = 1;
            }
            int pagesize = 10;
            //获取页码总数
            int pagecount = ubll.GetTotalPage(pagesize);
            //页码校验
            pageindex = pageindex > pagecount ? pagecount : pageindex;
            pageindex = pageindex < 1 ? 1 : pageindex;
            //获得返回的数据，u3tier是数据对象，包含了前端页面要展示的字段
            List<u3tier> List = ubll.GetPageList(pageindex, pagesize);
            //获取页码条，GetPageBar(）方法与上一篇文章的代码一致
            string pagebar = webCOMMON.PageBarHelper.GetPageBar(pageindex, pagecount);
            // System.Web.Script.Serialization.JavaScriptSerializer是微软提供的一个把数据转换成json的一个类
            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
            //将含有List，string类型的匿名类转成json的字符串，并创建了UList，PageBar两个属性
            string json = js.Serialize(new { UList = List , PageBar = pagebar });
            //返回json数据
            context.Response.Write(json);
        }

优缺点：

优点

按需取数据，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
可以免去整个页面的刷新，有更好的用户体验
异步与服务器联系，优化了客户端与服务器之间关系，一定程度上减少了不必要的数据传输量

缺点

不能很好支持移动设备
不能被蜘蛛爬取

总结

使用ajax分页的时候，要注意：

获取数据之后，要先清除原来的数据，再追加带显示数据的区域
$.post()中回调函数返回的data默认是text类型，记得把数据转成json类型
System.Web.Script.Serialization.JavaScriptSerializer是微软提供的一个把数据转换成json的一个类，可以使用里面的Serialize（）方法直接把对象或者集合转成json对象

PS:博文中如有什么不对的地方恳请大家指出，谢谢~