ADO.NET如何用AJAX实现分页？

在Web开发中,ADO.NET结合Ajax实现分页是一种高效的数据加载方式，能够显著提升用户体验，避免页面刷新带来的延迟，本文将详细介绍通过ADO.NET与Ajax技术实现分页的核心步骤、代码示例及注意事项，帮助开发者掌握这一实用技术。

实现ADO.NET与Ajax分页的核心思路是：前端通过Ajax异步请求分页数据，后端使用ADO.NET从数据库中查询指定页的数据并返回JSON格式，前端解析数据后动态渲染到页面，以下是具体实现步骤：

后端实现：ADO.NET分页查询

后端需要创建一个处理Ajax请求的接口,该接口接收页码和每页数据量参数，使用ADO.NET执行分页查询，以SQL Server为例，可采用ROW_NUMBER()函数实现分页，代码如下：

public class PaginationHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        int pageIndex = int.Parse(context.Request["pageIndex"] ?? "1");
        int pageSize = int.Parse(context.Request["pageSize"] ?? "10");
        string connectionString = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(connectionString))
        {
            string sql = @"SELECT * FROM (
                SELECT ROW_NUMBER() OVER (ORDER BY ID) AS RowNum, * 
                FROM Products
            ) AS PagedData WHERE RowNum BETWEEN @StartRow AND @EndRow";
            SqlCommand cmd = new SqlCommand(sql, conn);
            cmd.Parameters.AddWithValue("@StartRow", (pageIndex - 1) * pageSize + 1);
            cmd.Parameters.AddWithValue("@EndRow", pageIndex * pageSize);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            da.Fill(dt);
            // 返回JSON格式数据
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            context.Response.ContentType = "application/json";
            context.Response.Write(serializer.Serialize(dt));
        }
    }
}

关键点说明：

1. 参数传递：通过context.Request获取前端传递的页码（pageIndex）和每页条数（pageSize）。
2. 分页查询：使用ROW_NUMBER()为结果集添加行号，通过BETWEEN子句筛选指定页的数据。
3. 数据返回：通过JavaScriptSerializer将查询结果转换为JSON格式返回给前端。

前端实现：Ajax请求与数据渲染

前端通过jQuery的$.ajax方法发送异步请求，获取数据后动态绑定到页面，以下为完整示例代码：

<table id="productTable" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<div id="pagination">
    <button id="prevBtn">上一页</button>
    <span id="pageInfo"></span>
    <button id="nextBtn">下一页</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    let currentPage = 1;
    const pageSize = 10;
    function loadData(page) {
        $.ajax({
            url: 'PaginationHandler.ashx',
            type: 'GET',
            data: { pageIndex: page, pageSize: pageSize },
            success: function(response) {
                const data = JSON.parse(response);
                renderTable(data);
                updatePagination();
            },
            error: function() {
                alert("数据加载失败");
            }
        });
    }
    function renderTable(data) {
        const tbody = $('#productTable tbody');
        tbody.empty();
        data.forEach(item => {
            tbody.append(`<tr>
                <td>${item.ID}</td>
                <td>${item.Name}</td>
                <td>${item.Price}</td>
            </tr>`);
        });
    }
    function updatePagination() {
        $('#pageInfo').text(`第 ${currentPage} 页`);
        $('#prevBtn').prop('disabled', currentPage === 1);
        $('#nextBtn').prop('disabled', false); // 实际项目中需判断是否最后一页
    }
    $('#prevBtn').click(() => {
        if (currentPage > 1) {
            currentPage--;
            loadData(currentPage);
        }
    });
    $('#nextBtn').click(() => {
        currentPage++;
        loadData(currentPage);
    });
    // 初始加载数据
    loadData(currentPage);
</script>

关键点说明：

1. Ajax请求：通过data参数传递分页信息，success回调中处理返回的JSON数据。
2. 数据渲染：使用jQuery的append方法动态生成表格行，避免DOM操作的性能问题。
3. 分页控件：通过按钮点击事件切换页码，并禁用无效的导航按钮（如首页的“上一页”）。

优化与注意事项

1. 数据库性能优化：

   • 确保ORDER BY字段有索引，避免全表扫描。
   • 对于大数据量,建议使用OFFSET-FETCH语法（SQL Server 2012+）替代ROW_NUMBER()，性能更优：

     SELECT * FROM Products ORDER BY ID OFFSET @Offset ROWS FETCH NEXT @PageSize ROWS ONLY

2. 前端缓存：

   • 可通过localStorage缓存已加载的页数据，减少重复请求。

3. 错误处理：

   
   （图片来源网络，侵删）
   • 后端需捕获数据库异常并返回友好错误信息,前端通过error回调提示用户。

4. 安全性：

   • 防止SQL注入：始终使用参数化查询（如示例中的Parameters.AddWithValue）。
   • 对输入参数进行合法性校验（如页码必须为正整数）。

相关问答FAQs

问题1：如何处理分页时的总页数计算？
解答：总页数可通过查询总记录数后计算得出，在后端接口中添加总记录数查询：

string countSql = "SELECT COUNT(*) FROM Products";
int totalCount = Convert.ToInt32(new SqlCommand(countSql, conn).ExecuteScalar());
int totalPages = (int)Math.Ceiling((double)totalCount / pageSize);

然后将totalPages返回给前端，用于禁用“下一页”按钮或显示页码导航。

问题2：Ajax分页时如何解决跨域问题？
解答：若前后端分离部署，需在服务端响应头中添加跨域允许，例如在ASP.NET中：

context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");

或使用CORS中间件（如.NET Core中的app.UseCors()），生产环境中建议指定具体域名而非以提高安全性。