• 注册
  • ajax交互 关注:1 内容:6

    最简单的ajax分页

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • TP5生成的分页是这样的

      1. <ul class="pagination">

      2. <li class="disabled"><span>«</span></li>

      3. <li class="active"><span>1</span></li>

      4. <li><a href="/index.html?page=2">2</a></li>

      5. <li><a href="/index.html?page=3">3</a></li>

      6. <li><a href="/index.html?page=4">4</a></li>

      7. <li><a href="/index.html?page=2">»</a></li>

      8. </ul>

      我们只需要使用jq

      1. $(function(){

      2. $(function () {

      3. //当分页链接被点击的时候获取到他的href 然后通过ajax去获取数据

      4. $(".pagination a").click(function () {

      5. $.get($(this).attr("href"),function(){

      6. //将获取到的数据写入页面Body中

      7. $(document.body).html(result);

      8. });

      9. //阻止a链接的跳转

      10. return false;

      11. });

      12. });

      13. });

      还可以使用$.ajax 使用boforeSend 在里面添加等待中之类的提示信息,提升用户体验

      1. $(function () {

      2. $(".pagination a").click(function () {

      3. var url = $(this).attr("href"); //获取点击的url

      4. $.ajax({

      5. url:url, //url

      6. //使用的是layer的弹窗组件提示等待中,提升用户体验

      7. beforeSend:function () {

      8. layer.msg('加载数据中...',{shade:0.1,icon:16});

      9. },

      10. success:function (result) {

      11. layer.closeAll(); //关闭弹窗

      12. $(document.body).html(result);

      13. }

      14. });

      15. //阻止a链接的跳转

      16. return false;

      17. });

      18. });

      你需要登录,才能进行发帖操作
    • 单栏布局 帖子间隔 侧栏位置: