学做网站培训课程介绍

当前位置:

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

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

分页导航

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

AJAX无刷新翻页

下面学做网站论坛就来介绍一下AJAX无刷新翻页的制作方法

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


<div class="post-read-more">
<?php next_posts_link('更多+','');//下一页的链接 ?>
</div>

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


jQuery(document).ready(function($) {
//点击下一页的链接(即那个a标签)
$('div.post-read-more a').click( function() {
$this = $(this);
$this.addClass('loading'); //给a标签加载一个loading的class属性,可以用来添加一些加载效果
var href = $this.attr("href"); //获取下一页的链接地址
if (href != undefined) { //如果地址存在
$.ajax( { //发起ajax请求
url: href, //请求的地址就是下一页的链接
type: "get", //请求类型是get

error: function(request) {
//如果发生错误怎么处理
},
success: function(data) { //请求成功
$this.removeClass('loading'); //移除loading属性
var $res = $(data).find(".post"); //从数据中挑出文章数据,请根据实际情况更改
$('.posts-loop').append($res); //将数据加载加进posts-loop的标签中。
var newhref = $(data).find(".post-read-more a").attr("href"); //找出新的下一页链接
if( newhref != undefined ){
$(".post-read-more a").attr("href",newhref);
}else{
$(".post-read-more").hide(); //如果没有下一页了,隐藏
}
}
});
}
return false;
});

});

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


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

第四步:最后在分类列表的父DIV中添加一个class类:posts-loop;

如下:<div class="newslist posts-loop">

实现的加载结果:


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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • Ajax BootModal Login 是一个用Bootstrap的modal效果做的弹出式ajax前端注册登录插件,使用该插件,我们可以最简单的在前台添加一个ajax注册登陆按钮
  • 在做网站时,有些页面需要不断的获取数据,现在常用的方法就是通过AJAX 无刷新获取PHP接口数据,这样可以实现在不刷新页面的前提下,不断的获取加载数
  • 在做网站时,网站不同页面大部分版块是相同的,只有某个版块的数据是变化的。这时我们可以使用AJAX局部刷新来实现表单提交时,在不变化网页地址的情况
  • 我们通常在做网站时,如果一个栏目下的内容过多,我们会使用分页功能来将内容进行分页展示。如下图:今天我们介绍一下除了分页之外,我们展示
  • 手机网站越来越多,通常在手机网站制作时,如果页面很多的情况下,我们会使用分页功能,通过分页的方式来显示不同的内容。手机网站除了使用这样的普通
  • 作用这个实例是用于Wordpress建网站过程中实现点击加载下一页翻页功能,它是使用jquery来实现无限加载下一页的文章列表。可以取代普通的按钮翻页。