WordPress教程

WordPress 文章列表实现AJAX无刷新翻页方法

阿里云

我们通常做网站翻页,会制作分页导航,用户可以点击第一页、第二页……第 N 页。这样的分页功能就是通过超链接加载新的页面。(制作方法见:WordPress 无插件 纯代码实现分页导航)效果如下图:

除了这种点击加载型分页之外,还有一种无刷新翻页功能,现在也在很多网站中使用,就是 AJAX 无刷新翻页。点击后,不刷新页面的情况下,加载下一页的内容。下面就来介绍一下 AJAX 无刷新翻页的制作方法。

第一步:在页面的底部放上以下的代码,用于显示加载文字按钮;

也想出现在这里?联系我们
创客主机
  1. <div class="post-read-more">
  2. <?php next_posts_link('更多+','');//下一页的链接 ?>
  3. </div>

第二步:将以下的 JS 加载代码保存到一个 JS 文件,保存名为 ajax.js;并且上传到自己模板文件夹下;

  1. jQuery(document).ready(function($) {
  2. //点击下一页的链接(即那个a标签)
  3. $('div.post-read-more a').click( function() {
  4. $this = $(this);
  5. $this.addClass('loading'); //给a标签加载一个loading的class属性,可以用来添加一些加载效果
  6. var href = $this.attr("href"); //获取下一页的链接地址
  7. if (href != undefined) { //如果地址存在
  8. $.ajax( { //发起ajax请求
  9. url: href, //请求的地址就是下一页的链接
  10. type: "get", //请求类型是get
  11.  
  12. error: function(request) {
  13. //如果发生错误怎么处理
  14. },
  15. success: function(data) { //请求成功
  16. $this.removeClass('loading'); //移除loading属性
  17. var $res = $(data).find(".post"); //从数据中挑出文章数据,请根据实际情况更改
  18. $('.posts-loop').append($res); //将数据加载加进posts-loop的标签中。
  19. var newhref = $(data).find(".post-read-more a").attr("href"); //找出新的下一页链接
  20. if( newhref != undefined ){
  21. $(".post-read-more a").attr("href",newhref);
  22. }else{
  23. $(".post-read-more").hide(); //如果没有下一页了,隐藏
  24. }
  25. }
  26. });
  27. }
  28. return false;
  29. });
  30.  
  31. });

第三步:加载 ajax.js。在自己网页的底部放上以下的 JS 调用代码来加载 ajax.js 文件;

  1. <script src="<?php echo get_template_directory_uri();?>/ajax.js"></script>

第四步:最后在分类列表的父 DIV 中添加一个 class 类:posts-loop;
如下:<div class="newslist posts-loop">
实现的加载结果:

  1. <div class="newslist posts-loop">
  2. <div id="post-1" class="post"><!--第一篇文章--></div>
  3. <div id="post-2" class="post"><!--第二篇文章--></div>
  4. <div id="post-3" class="post"><!--第三篇文章--></div>
  5. <div id="post-4" class="post"><!--第四篇文章--></div>
  6. </div>

WordPress 文章列表实现 AJAX 无刷新翻页方法

已有 231 人购买
查看演示升级 VIP立刻购买

收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!