javascript项目实战---ajax实现无刷新分页_javascript ajax技术应用—无刷新分页

// 假设我们有一个用于分页的函数
function paginate(page) {
  $.ajax({
    url: 'server.php', // 服务器端脚本，用于处理分页逻辑
    type: 'GET',
    data: { page: page }, // 发送当前页码到服务器
    dataType: 'json',
    success: function(response) {
      // 假设服务器返回的是JSON数据
      // 使用返回的数据更新页面内容
      updatePageContent(response.data);
    },
    error: function(xhr, status, error) {
      console.error("分页请求失败:", status, error);
    }
  });
}
 
// 更新页面内容的函数
function updatePageContent(data) {
  // 假设data是一个数组，包含了要显示的数据
  var list = $('#list'); // 假设有一个id为list的容器用于显示数据
  list.html(''); // 清空之前的内容
  data.forEach(function(item) {
    // 添加新的内容到页面
    list.append('<div>' + item.content + '</div>');
  });
}
 
// 假设我们有一个用于上一页和下一页的按钮
$('#prev-page').click(function() {
  var currentPage = parseInt($('#current-page').text(), 10);
  paginate(currentPage - 1);
});
 
$('#next-page').click(function() {
  var currentPage = parseInt($('#current-page').text(), 10);
  paginate(currentPage + 1);
});

这个代码示例展示了如何使用AJAX实现无刷新分页。当用户点击上一页或下一页按钮时，paginate函数会向服务器发送一个请求，请求当前页的数据。服务器处理完毕后，返回JSON格式的数据，然后使用updatePageContent函数更新页面上的内容。这里的代码假设你已经有了一个服务器端脚本server.php，它能够处理分页逻辑并返回正确的数据。