要点
- 思路
- 核心代码
- 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();
})
//------------------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 = ; 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("=")[];
//清除之前的表格数据
$("#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 = ;
}
int pagesize = ;
//获取页码总数
int pagecount = ubll.GetTotalPage(pagesize);
//页码校验
pageindex = pageindex > pagecount ? pagecount : pageindex;
pageindex = pageindex < ? : 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:博文中如有什么不对的地方恳请大家指出，谢谢~
![Javascript构建Bingo卡片游戏[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)