二、获取文章分类页的下一页文章数据

分析:这个和上面的不太一样,这里只需要指定下一页的链接,点击时更新文章数据同时更新下一页链接就行
HTML:下一页文章链接、loading图标


<div class="load_more">
     <?php next_posts_link( __( '加载更多', 'lee' ) ); ?>    //链接地址
     <em class="loading_icon"></em>                      //loading图标
</div>

CSS:具体样式请查看分类页效果
JS:将返回的数据添加至页面,更新链接,同时也要防止在返回数据前的多次点击


//分类页ajax翻页
if(!$(".load_more a").length){
	$(".load_more").remove();  //判断是否含有下一页
}
//是否正在加载
var onloading = false;
$("#wrapper").on("click",".load_more a",function() {
	if(onloading){
		return false;
	}else{
		$.ajax({
			type: "get",
			url: $(this).attr("href"),
			beforeSend: function(xhr) {
				xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				$(".load_more").find("a").text("加载中...");
				$(".load_more em").show();
				onloading = true;
			},
			error: function(request) {
				console.log(request.responseText);
			},
			statusCode: {
			     404: function() {
			     	console.log("404");
			     }
			},
			success: function(data) {
                               //获取文章所在的DOM及下一页链接
				var result = $(data).find("#main .article");
				var nextHref = $(data).find(".load_more a").attr("href");
				// 渐显新内容
				$(".load_more").before(result.fadeIn(400));
				$(".load_more em").hide();		
				$(".load_more").find("a").text("加载更多");
				if (nextHref != undefined) {
					$(".load_more a").attr("href", nextHref);
				} else {  // 若没有链接,即为最后一页,则移除导航
					$(".load_more").remove();
				}
				onloading = false;
			}
		});
	}
	return false;
});

// 给浏览器窗口绑定 scroll 事件
$(window).on("scroll",function() {
	var windowH = $(window).height();
	var documentH = $(document).height();
	// 判断窗口的滚动条是否接近页面底部
	if ($(document).scrollTop() + windowH > documentH - 100) {
		if(onloading){
			return false;
		}else{
                        //滚动到页面底部时,自动触发点击下一页
			$(".load_more a").click();
		}
	}
});

总结
使用ajax,能提升用户体验,但是也会给SEO带来影响,因为搜索引擎的爬虫爬取不到下一页甚至更多页的内容。但还是有方法解决的,比如直接在首页添加网站地图,使用SEO插件等等。