day50-springboot+ajax分页

这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。

在Spring Boot中使用AJAX实现分页，你可以创建一个控制器来处理分页的请求，并使用AJAX从前端发送请求并更新页面数据。

后端代码示例（Spring Boot控制器）:




import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class PaginationController {
 
    // 假设有一个服务来处理分页逻辑
    // @Autowired
    // private YourService yourService;
 
    @GetMapping("/get-page")
    public Page<YourEntity> getPage(@RequestParam int page, @RequestParam int size) {
        PageRequest pageRequest = PageRequest.of(page, size);
        // 使用pageRequest从数据库获取数据
        // Page<YourEntity> pageResult = yourService.findPaginated(pageRequest);
        // return pageResult;
    }
}

前端代码示例（HTML + AJAX）:




<!DOCTYPE html>
<html>
<head>
    <title>分页示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 
<div id="data-container">
    <!-- 这里将显示加载的数据 -->
</div>
 
<button id="next-page">下一页</button>
 
<script>
    $(document).ready(function() {
        var currentPage = 0;
        var pageSize = 10;
 
        // 加载初始数据
        loadPageData(currentPage, pageSize);
 
        // 按钮点击事件，加载下一页数据
        $('#next-page').click(function() {
            currentPage++;
            loadPageData(currentPage, pageSize);
        });
 
        // AJAX请求函数
        function loadPageData(page, size) {
            $.ajax({
                url: '/get-page',
                type: 'GET',
                data: {
                    page: page,
                    size: size
                },
                success: function(data) {
                    // 假设返回的数据是JSON格式
                    // 更新数据显示
                    $('#data-container').html(''); // 清空容器内容
                    $.each(data.content, function(index, item) {
                        $('#data-container').append('<p>' + item.property + '</p>');
                    });
                },
                error: function(error) {

day50-springboot+ajax分页

评论已关闭

推荐阅读