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

Joker织梦开发者

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

除了这种点击加载型分页之外，还有一种无刷新翻页功能，现h @ + e在也在很多网站中使} , ` M } Y用，就是 AJAX 无刷新翻页。点击后，不刷新页面的情况下，加载下一页的内容。下面就来介绍一下 AJAX 无刷新翻页的制作方z 8 B法Y { Y : B K s i。

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

第二步：将以下的 JS 加载代码保存o ( q R J v ]到一个 JS 文件，保存名为 ajax.js；并且上传到自己模板文件夹下；

jl \ o Z x S @Query(df b S = b N Iocument).rean d G G Udy(function($) {
//点击下一页的链接(即那个a标签)
$&7 6 2 B k 1 J#40;'div.post-read-more a').click( function&\ o E : i { E | =#40;) {
$this = $(this);
$this.addClass(c _ U'loading'&/ w \ : a h#41;; //给a, * H标签加载一个loading的class属性，可以用来添加一些加载效果
var href = $this.attr("href"q V m 7 O P s41;; //获取下一页的链接地址
i] & 7 s 8 K % ) vf (href != undefined) { //如果地址存在
$.ajax( { //发起ajax请求
url: href, //请求的地址就是下一页的链接P O L
type: "get", //请求类型是ge/ K yt
error: function(requ0 ^ Z p G d $ Pest) {
//如果发生错误@ e } I * T `怎么处理
},
success: function(datA 6 I ) E ( \a) { //请求成功; S V I t
$this.removeClass('loading'); //移除loa5 P # 1 Q & / t Fding属j } { # ) : ; x性
var $res = $(data).find(".post"); //从数据中挑出文章数据，请根据实际情况更改
$('.posts-loop').append@ - p0;$res); //将数据加载加进posts-loop的标签中。
var newhref = $(data).r [ F \find(".post-read: f 1 a W n-more a").attru V Q %40;"href");X A : v 1 //找出新的下一页链接
if( newhref != undefined )Q W 5 } n \ u{
$(".post-read-more a").attr("href",newhrefS X ; M41;;
}else{
$(&quotb = L N h p .;.post-read-more").hide(); //如果没有下一页了，隐藏
}
}
});
}
returnA * W # / K : 7 false;
}r 0 i B L :1;;
E D `5;);