(一)前台
<!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; }
}
}
}