js前台分页显示后端JAVA数据响应

为了在前台进行分页显示后端Java数据响应，我们需要进行以下步骤：

1. 后端Java代码编写

首先，在后端Java代码中，需要完成以下任务：

• 获取数据库中的数据。
• 按照前台请求的分页大小和页码数，对数据进行分页。
• 将分页后的数据封装成JSON格式的数据，传递给前端。

这些任务可以通过使用Spring Boot框架和MyBatis ORM完成。

举个例子，示例代码：

@ResponseBody
@RequestMapping("/getBooks")
public Page<Book> getBooks(@RequestParam(name = "pageNum", required = false, defaultValue = "1")
int pageNum, @RequestParam(name = "pageSize", required = false, defaultValue = "10")
int pageSize) {
    PageHelper.startPage(pageNum,pageSize);
    List<Book> books = bookMapper.selectByExample(new BookExample());
    PageInfo<Book> pageInfo = new PageInfo<>(books);
    return pageInfo;
}

在上述示例代码中，我们使用了PageHelper插件对数据进行分页，并使用PageInfo类将分页后的数据封装成JSON格式响应前端请求。

1. 前端JavaScript代码编写

然后，在前端JavaScript代码中，需要完成以下任务：

• 发起与后端的HTTP请求，获取JSON格式的数据。
• 解析JSON格式的数据，将数据展示在前端页面上。
• 根据用户交互，实现分页功能。

这些任务可以通过使用jQuery框架和Bootstrap样式库完成。

举个例子，示例代码：

// 获取数据
function getBooks(pageNum,pageSize) {
  $.getJSON('/getBooks?pageNum='+pageNum+'&pageSize='+pageSize,function(data){
    var html = '';
    $(data.list).each(function(index,book) {
      html += '<div class="book-item">'+ book.name +'</div>';
    });
    $('#book-list').html(html);
    // 分页组件
    $('#pagination').twbsPagination({
      totalPages: data.pages,
      startPage: pageNum,
      visiblePages: 5,
      onPageClick: function (event, page) {
        getBooks(page,pageSize);
      }
    });
  });
}
// 页面加载完成
$(function () {
  getBooks(1,10);
});

在上述示例中，我们使用了jQuery框架中的$.getJSON方法获取后端数据，并使用Bootstrap样式库中的分页组件实现了前台分页。同时，我们对分页组件的onPageClick事件进行监听，以便在用户点击页码时刷新数据。

以上是Javascript前台分页显示后端Java数据响应的攻略及简单示例。

阅读剩余 34%