ajax 无刷新分页

来源：互联网发布：学历网络教育报名费用编辑：程序博客网时间：2024/04/19 21:37

一般处理程序代码：

<%@ WebHandler Language="C#" Class="PagedService" %>

using System;
using System.Web;
using DSnofreshTableAdapters;
using System.Collections;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Runtime.Serialization.Json;
using System.Web.Script.Serialization;

public class PagedService : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string action=context.Request["action"];

        if(action=="getpagecount")
        {
            var adapter= new T_CommentsTableAdapter();
            int count = adapter.SelectCount().Value;
            int pagecount = count / 2;
            if (count%10!=0)
            {
                pagecount++;
            }
            context.Response.Write(pagecount);
        }
        else if (action == "pagedata")
        {
           string pagenum = context.Request["pagenum"];
           int iPagenum = Convert.ToInt32(pagenum);
           var adapter = new T_CommentsTableAdapter();
            var data = adapter.GetPageData((iPagenum - 1) * 2 + 1, iPagenum * 2);
            //var data = adapter.GetData();
           List<comments> list = new List<comments>();

           foreach (var single in data)
           {
               list.Add(new comments() { postDate=single.PostDate,msg=single.Msg});
           }
           JavaScriptSerializer jss = new JavaScriptSerializer();
           string json = jss.Serialize(list);
           context.Response.Write(json);


        }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
    public class comments
    {
        public DateTime postDate
        {
            get;
            set;
        }
        public string msg
        {
            get;
            set;
        }
    }

}

ajax源码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jQ/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.post("PagedService.ashx", { "action": "getpagecount" }, function (data, status) {
                for (var i = 1; i <= data; i++) {
                    var td = $("<td><a href=''>" + i + "</a></td>");
                    $("#trpage").append(td);
                    td.click(function (e) {
                        e.preventDefault(); //防止导向连接
                        $.post("PagedService.ashx", { "action": "pagedata", "pagenum":$(this).text()}, function (data, status) {
                            var comment = $.parseJSON(data);
                            //$("#comments li").empty(); //这样做清空的是li下面的内容，并不能把li清空；
                            $("#comments").empty(); //这才可以嘛，把li一块清空了，多好啊
                            for (var i = 0; i < comment.length; i++) {
                                var com = comment[i]
                                var li = $("<li>" + com.postDate + ":" + com.msg + "</li>"); //果然如此，怎么装的怎么拿出来
                                $("#comments").append(li);
                            }

                        });
                    });
                }
            }
            );
        });

    </script>
</head>
<body>
<ul id="comments"></ul>

掌握了这段代码就可以秒杀一切ajax 效果了