使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

使用JQuery+Ajax+Json实现分页显示的完整攻略如下：

步骤一：编写前端代码

1. 在HTML中添加以下代码：

<div id="content"></div>
<div id="pagination"></div>

其中content用于展示分页数据，pagination用于展示分页页码。

1. 在JS中添加以下代码：

var page = 1; //当前页码
var pageSize = 10; //每页显示数量

//获取数据并渲染页面
function loadData() {
    $.ajax({
        type: "get",
        url: "data.php",
        data: {
            page: page,
            pageSize: pageSize
        },
        dataType: "json",
        success: function(data) {
            var html = '';
            $.each(data, function(i, item) {
                html += '<p>' + item.title + '</p>'; //获取数据中的标题并添加到html中
            });
            $('#content').html(html); //将数据添加到content中
            renderPage(data.length); //渲染分页
        },
        error: function(xhr, status, error) {
            console.log(error); //请求失败时打印错误信息
        }
    });
}

//渲染分页
function renderPage(total) {
    var totalPages = Math.ceil(total / pageSize); //计算总页数
    var pageHtml = '';
    for (var i = 1; i <= totalPages; i++) {
        if (i == page) {
            pageHtml += '<span class="current">' + i + '</span>'; //当前页
        } else {
            pageHtml += '<a href="javascript:;" onclick="goPage(' + i + ')">' + i + '</a>'; //点击跳转到指定页
        }
    }
    $('#pagination').html(pageHtml); //将页码添加到pagination中
}

//跳转到指定页
function goPage(p) {
    page = p; //修改当前页码
    loadData(); //重新加载数据
}

loadData(); //页面加载完成后，加载第一页的数据

步骤二：编写后端代码

1. 在PHP中编写接口代码（这里假设接口名为data.php）：

<?php
$pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', ''); //连接数据库
$page = isset($_REQUEST['page']) ? $_REQUEST['page'] : 1; //获取当前页码
$pageSize = isset($_REQUEST['pageSize']) ? $_REQUEST['pageSize'] : 10; //获取每页显示数量
$start = ($page - 1) * $pageSize; //计算起始位置
$sql = "select * from article limit $start, $pageSize"; //查询语句
$stmt = $pdo->query($sql); //执行查询
$data = $stmt->fetchAll(PDO::FETCH_ASSOC); //获取查询结果
echo json_encode($data); //将查询结果以json格式返回
?>

示例一：异步加载分页数据

假设某个页面，需要在页面中异步加载一段数据，并使用分页来展示。在这个页面中，需要有一个按钮用于加载数据，并且需要指定数据来源的URL。

1. HTML代码

<button id="loadData">加载数据</button>
<div id="content"></div>
<div id="pagination"></div>

1. JS代码

var page = 1; //当前页码
var pageSize = 10; //每页显示数量
var url = 'data.php';

//获取数据并渲染页面
function loadData() {
    $.ajax({
        type: "get",
        url: url,
        data: {
            page: page,
            pageSize: pageSize
        },
        dataType: "json",
        success: function(data) {
            var html = '';
            $.each(data, function(i, item) {
                html += '<p>' + item.title + '</p>'; //获取数据中的标题并添加到html中
            });
            $('#content').html(html); //将数据添加到content中
            renderPage(data.length); //渲染分页
        },
        error: function(xhr, status, error) {
            console.log(error); //请求失败时打印错误信息
        }
    });
}

//渲染分页
function renderPage(total) {
    var totalPages = Math.ceil(total / pageSize); //计算总页数
    var pageHtml = '';
    for (var i = 1; i <= totalPages; i++) {
        if (i == page) {
            pageHtml += '<span class="current">' + i + '</span>'; //当前页
        } else {
            pageHtml += '<a href="javascript:;" onclick="goPage(' + i + ')">' + i + '</a>'; //点击跳转到指定页
        }
    }
    $('#pagination').html(pageHtml); //将页码添加到pagination中
}

//跳转到指定页
function goPage(p) {
    page = p; //修改当前页码
    loadData(); //重新加载数据
}

$(document).ready(function() {
    $('#loadData').click(function() {
        loadData(); //加载数据并渲染页面
    });
});

示例二：动态修改数据来源

假设某个页面需要动态修改数据来源的URL，并且需要充值到第一页。

1. HTML代码

<input type="text" id="url" value="data.php" />
<button id="loadData">加载数据</button>
<div id="content"></div>
<div id="pagination"></div>

1. JS代码

var page = 1; //当前页码
var pageSize = 10; //每页显示数量
var url = ''; //数据来源URL

//获取数据并渲染页面
function loadData() {
    $.ajax({
        type: "get",
        url: url,
        data: {
            page: page,
            pageSize: pageSize
        },
        dataType: "json",
        success: function(data) {
            var html = '';
            $.each(data, function(i, item) {
                html += '<p>' + item.title + '</p>'; //获取数据中的标题并添加到html中
            });
            $('#content').html(html); //将数据添加到content中
            renderPage(data.length); //渲染分页
        },
        error: function(xhr, status, error) {
            console.log(error); //请求失败时打印错误信息
        }
    });
}

//渲染分页
function renderPage(total) {
    var totalPages = Math.ceil(total / pageSize); //计算总页数
    var pageHtml = '';
    for (var i = 1; i <= totalPages; i++) {
        if (i == page) {
            pageHtml += '<span class="current">' + i + '</span>'; //当前页
        } else {
            pageHtml += '<a href="javascript:;" onclick="goPage(' + i + ')">' + i + '</a>'; //点击跳转到指定页
        }
    }
    $('#pagination').html(pageHtml); //将页码添加到pagination中
}

//跳转到指定页
function goPage(p) {
    page = p; //修改当前页码
    loadData(); //重新加载数据
}

$(document).ready(function() {
    $('#url').change(function() {
       url = $(this).val(); //修改数据来源URL
       page = 1; //重置分页为第一页
    });

    $('#loadData').click(function() {
        loadData(); //加载数据并渲染页面
    });
});

以上就是使用JQuery+Ajax+Json实现分页显示的完整攻略，希望对你有帮助。