从后台获得数据,前台实现数据加载和异步查询

博客详细描述了如何在前端实现数据的异步加载和查询,特别是在页面导航时,如点击页签、页码和前进后退按钮。通过PHP作为后端,实现了动态数据请求和响应,确保了用户体验的流畅性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前台页面大体是这样的
默认加载指定页签的第一页数据,
单击顶部页签时,异步请求相应的第一页数据
单击底部页码时,异步请求对应页码的数据
单击前进和后退时,对应请求相关数据和按钮的禁用状态

这里写图片描述

php部分

<?php
思路:未提交页签则默认异步加载指定的页签第一页数据,客户端提交了页签则异步加载对应的第一页数据,都要向前端页面返回指定页签的id
客户端提交页码时,要同时提交对应也前的id

前端数据处理下边是个简单的例子

//1 页面首次加载时
$.ajax({//页面初次加载时异步请求指定页签的第一页数据
  type:'GET',
  data:{id:指定页签在数据库中的编号,pageNum:1},
  url:'php文件',
  success:function (pager) {
    pageData(pager);
    pageNum(pager);
  }
})
//2 分页数据函数 举例如下
function pageData(pager) {
  var html="";
  $.each(pager.data,function (i,style) {
    html+=`
                <li>
                  <img src="${style.pic}">
                  <h3>
                    <a href="#">${style.title}</a>
                  </h3>
                </li>
              `;
  });
  $(".style_detail").html(html);
}
//3 分页条函数
function pageNum(pager) {
  // 判断总页数是否大于1
  if(pager.pageCount<=1){//总页数为1
    html=`<a href="" class="disabled"><</a><a href="1" class="active">1</a><a href="" class="disabled">></a>`;
  }else{ //总页数大于1
    var html=`<a href="" class="disabled"><</a>`;
    for(var i=1;i<=pager.pageNum-1;i++){
      html+=`<a href="${i}">${i}</a>`;
    }
    html+=`<a href="${pager.pageNum}" class="active">${pager.pageNum}</a>`;
    for(i=pager.pageNum+1;i<=pager.pageCount;i++){
      html+=`<a href="${i}">${i}</a>`;
    }
    html+=`<a href="" class="next">></a>`;
  }
  $("#page").html(html);
}
//4 底部分页栏异步请求数据
$("#page")
  .on("click","a:not(:first,:last)",function (e) { // 中间按钮
    e.preventDefault();
    if($(this).next().html()=="&gt;"){//后一个兄弟是>
      $(this).addClass("active").siblings(".active").removeClass("active");
      $(this).next().addClass("disabled").siblings(".disabled").removeClass("disabled");
    }else if($(this).prev().html()=="&lt;"){//前一个兄弟是<
      $(this).addClass("active").siblings(".active").removeClass("active");
      $(this).prev().addClass("disabled").siblings(".disabled").removeClass("disabled");
    }else if($(this).next().html()=="&gt;"&&$(this).prev().html()=="&lt;"){//后一个兄弟是> 前一个兄弟是<
      $(this).next().addClass("disabled");
      $(this).prev().addClass("disabled");
    }else{
      $(this).addClass("active").siblings(".active").removeClass("active").siblings(".disabled").removeClass("disabled");
    }
    var html="";
    var n=parseInt($(this).attr("href"));
    var id=parseInt($("#style_nav a.hover").attr("href"));
    $.ajax({
      type:'GET',
      url:'data/style.php',
      data:{pageNum:n,id:id},
      success:function (pager) {
        pageData(pager);
      }
    });
  })
  .on("click","a:first",function (e) { // < 按钮
    e.preventDefault();
    var html="";
    var id=parseInt($("#style_nav a.hover").attr("href"));
    var n=parseInt($('#page a[class="active"]').html());
    if(n>=2){
      n--;
      if(n==1){
        $(this).addClass("disabled").siblings(".disabled").removeClass("disabled");
      }
      $('#page a[class="active"]').removeClass("active").prev().addClass("active");
      $(this).attr("href",n);
      $.ajax({
        type:'GET',
        url:'data/style.php',
        data:{pageNum:n,id:id},
        success:function (pager) {
          pageData(pager);
        }
      })
    }
  })
  .on("click",'a:last',function (e) { // >  按钮
    e.preventDefault();
    var n=parseInt($('#page a[class="active"]').html());
    var lastN=parseInt($(this).prev().html());
    var html="";
    var id=parseInt($("#style_nav a.hover").attr("href"));
    n++;
    if(n==lastN){
      $(this).addClass("disabled").siblings(".disabled").removeClass("disabled");
    }
    if(n<=lastN){
      $('#page a[class="active"]').removeClass("active").next().addClass("active");
      $(this).attr("href",n);
      $.ajax({
        type:'GET',
        url:'data/style.php',
        data:{pageNum:n,id:id},
        success:function (pager) {
          pageData(pager);
        }
      })
    }
  });
//5 顶部页签 异步请求
$(".style_choice").on("click","a",function (e) {
  e.preventDefault();
  var html="";
  var n=parseInt($(this).attr("href"));
  $(this).addClass("hover").parent().siblings().children(".hover").removeClass("hover");
  $.ajax({
    type:'GET',
    url:'data/style.php',
    data:{id:n},
    success:function (pager) {
      pageData(pager);
      pageNum(pager);
      $("#page a:contains('1')").addClass("active").siblings(".active").removeClass("active");
    }
  });
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值