ajax json 无刷新分页

在网页开发中，实现分页功能是常见的需求。而使用 Ajax 和 JSON 实现无刷新分页更是目前流行的方式之一。

Ajax（Asynchronous JavaScript and XML）技术可以实现无刷新加载数据和更新网页内容的操作。而 JSON（JavaScript Object Notation）则是一种轻量级的数据交换格式，常用于数据的传输和储存。

使用 Ajax 和 JSON 实现分页功能的思路如下：

// 定义全局变量
var pageNumber = 1;  // 当前页码
var pageSize = 10;   // 每页数据条数

// 定义加载数据函数
function loadData() {
  $.ajax({
    url: '/getData',type: 'POST',dataType: 'json',data: {
      pageNumber: pageNumber,pageSize: pageSize
    },success: function (result) {
      if (result.code == 200) {
        // 清空原有数据
        $('.data-list').empty();
        // 更新页码和数据条数
        pageNumber = result.pageNumber;
        pageSize = result.pageSize;
        // 遍历数据
        $.each(result.data,function (index,item) {
          // 添加数据到列表
          $('.data-list').append('

' + item.name + '：' + item.age + '岁

'); }); } } }); } // 上一页按钮事件 $('.prev-btn').click(function () { if (pageNumber > 1) { pageNumber--; loadData(); } }); // 下一页按钮事件 $('.next-btn').click(function () { pageNumber++; loadData(); });

以上代码中，loadData() 函数通过使用 Ajax 向后台请求数据，并更新到网页上。通过定义全局变量 pageNumber 和 pageSize，实现无刷新分页的功能。而将数据以 JSON 格式传输和接收，使得数据传输更加高效。

总的来说，使用 Ajax 和 JSON 实现无刷新分页不仅能提高用户的体验度，还能使数据交互更加高效。