之前帮客户做网站的时候，如果要实现点击按钮加载更多新闻的功能，利用ajax实现的思路是，jquery ajax发送请求到服务器端，服务器端处理并获取符合标准的数据，然后返回到前端，前端获取到数据后附加到现有的网页里面，感兴趣的朋友可以看看我之前写的一篇文章《【常用】phpcms利用ajax实现网站手机端”点击加载更多”功能》
如果从0开始做开发，要实现这个功能开发工作量还是比较大的；按照我文章写的方法作为参考，实现起来相对会方便些，但是这个方法有个缺点是对SEO不太友好，搜索引擎蜘蛛爬虫是没法抓取到更多新闻的。
在帮另外一个客户仿一个网站的时候，发现参考网站上实现这个功能的方法更简洁，而且不用写服务器端代码，特摘抄总结下来以后备用，希望对有用的上的朋友有所帮助
这个方法主要实现以下2种场景：
1）点击加载更多按钮，利用jquery ajax，加载更多内容在当前页面显示
2）滚动网页窗口到当前可视窗口末尾的时候，利用jquery ajax加载更多新闻内容并附加到当前页面显示
实现的主要思路是，利用jquery ajax的get方法，请求当前页面分页里的下一页，然后利用$.find()方法把获取到的相关内容，比如新闻内容附加到新闻列表，分页数据替换掉现有的分页即可
核心代码如下
html部分，主要包括新闻列表和分页
<!DOCTYPE html>
<head>
<title>jquery ajax实例：鼠标滚动显示更多新闻，同时利于SEO，不用写服务器端代码【推荐】</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="news-list__full">
<ul class="js-ajax-list">
<!--
<?php
$year = intval($_GET['year']);
if($year != "0")
$where = " and date_format(from_unixtime(inputtime),'%Y') = '$year'";
?>
{pc:content action="lists" catid="$catid" where="$where" num="8" order="listorder desc,inputtime desc" page="$page"}
{loop $data $r}
{/loop}
{/pc}
-->
<li class="wow fadeInUp">
<a href="https://www.taiyoubang.com">
<h2>标题1《太友帮：专注seo、网站优化、整站优化，无效果不收费，公众号：太友帮》</h2>
<p>
太友帮专业提供网站优化推广解决方案，具有多年的行业优化经验，无排名不收费，可以免费测试效果，先合作后付费。详细提供包括网站seo优化、网站优化、SEO推广、SEO外包、整站优化、关键词优化、关键词排名、网站推广。
</p>
<img class="lazy lazyload" src="images/grey.gif" data-original="images/tyb.jpg">
</a>
</li>
<li class="wow fadeInUp">
<a href="https://www.taiyoubang.com">
<h2>标题2《太友帮：专注seo、网站优化、整站优化，无效果不收费，公众号：太友帮》</h2>
<p>
太友帮专业提供网站优化推广解决方案，具有多年的行业优化经验，无排名不收费，可以免费测试效果，先合作后付费。详细提供包括网站seo优化、网站优化、SEO推广、SEO外包、整站优化、关键词优化、关键词排名、网站推广。
</p>
<img class="lazy lazyload" src="images/grey.gif" data-original="images/tyb.jpg">
</a>
</li>
<li class="wow fadeInUp">
<a href="https://www.taiyoubang.com">
<h2>标题3《太友帮：专注seo、网站优化、整站优化，无效果不收费，公众号：太友帮》</h2>
<p>
太友帮专业提供网站优化推广解决方案，具有多年的行业优化经验，无排名不收费，可以免费测试效果，先合作后付费。详细提供包括网站seo优化、网站优化、SEO推广、SEO外包、整站优化、关键词优化、关键词排名、网站推广。
</p>
<img class="lazy lazyload" src="images/grey.gif" data-original="images/tyb.jpg">
</a>
</li>
<div class="ajax-page hide" style="display: none;">
<a href="list-19-0.html" class="prev icon-pleft">上一页</a>
<a class="current">1</a>
<a href="list-19-2.html">2</a>
<a href="list-19-3.html">3</a>
<a href="list-19-4.html">4</a>
<a href="list-19-5.html">5</a>
<a href="list-19-6.html">6</a>
<a href="list-19-7.html">7</a>
<a href="list-19-8.html">8</a>
<a href="list-19-9.html">9</a>
<a href="list-19-10.html">10</a> ..
<a href="list-19-20.html">20</a>
<a href="next.html" class="next icon-pright">下一页</a>
</div>
<!-- <div class="ajax-page hide" style="display: none;">{$wz_pages} </div> -->
</ul>
<div class="list-more__full">
<a href="javascirpt:;">
<div class="loading-anime">
<svg class="lds-message" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid">
<g transform="translate(25 50)">
<circle cx="0" cy="0" r="6" fill="#e60012" transform="scale(0.388636 0.388636)">
<animateTransform attributeName="transform" type="scale"
begin="-0.3333333333333333s" calcMode="spline"
keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1"
dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
<g transform="translate(50 50)">
<circle cx="0" cy="0" r="6" fill="#e60012"
transform="scale(0.0254543 0.0254543)">
<animateTransform attributeName="transform" type="scale"
begin="-0.16666666666666666s" calcMode="spline"
keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1"
dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
<g transform="translate(75 50)">
<circle cx="0" cy="0" r="6" fill="#e60012" transform="scale(0.161275 0.161275)">
<animateTransform attributeName="transform" type="scale" begin="0s"
calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0"
keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
</svg>
</div>
<span>MORE</span>
</a>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/lazyload.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
CSS部分，主要定义加载按钮风格：
.js-ajax-list{list-style: none;padding:0;}
.js-ajax-list a{color:#000;text-decoration: none}
.js-ajax-list img{
width: 100%
}
.list-more__full {
text-align:center;
font-size:0;
position:relative;
padding-top:10px
}
.list-more__full a{
text-decoration:none;
}
.list-more__full i {
display:inline-block;
vertical-align:middle;
width:10px;
height:10px;
background-color:#e60012;
opacity:.8;
margin:0 5px;
border-radius:50px
}
.list-more__full span {
display:block;
font-size:12px;
color:#111;
letter-spacing:2px;
margin-top:16px
}
.loading-anime {
position:absolute;
left:50%;
top:-24px;
display:inline-block;
width:60px;
margin-left:-33px;
height:60px;
}
.hide{
display:none;
}
JS部分，主要通过page函数里面的jquery ajax get方法请求分页里的下一页，然后把获取到的数据添加到当前页面
$(function () {
$('img.lazyload,div.lazyload').lazyload({
threshold: 200,
effect: 'fadeIn'
});
var ajax_page = $('.ajax-page');
var ajax_list = $('.js-ajax-list');
if (ajax_page.length > 0 && ajax_list.length > 0) {
var ajax_more_bol = true;
var btn_more = $('.list-more__full');
var page_a = $('.ajax-page a.next');
if (page_a.length <= 0 || page_a.attr('href') == null || page_a.attr('href') ==
'javascript:;') {
btn_more.hide();
return false;
} else {
$(window).scroll(function () {
var totalheight = parseFloat($(window).height()) + parseFloat($(window)
.scrollTop());
if (($(document).height() - 500) <= totalheight) {
if (ajax_more_bol === false) {
return false;
}
Page();
}
});
}
function Page() {
ajax_more_bol = false;
var obj_a = $('.ajax-page a.next');
if (obj_a.length <= 0 || obj_a.attr('href') == null || obj_a.attr('href') ==
'javascript:;') {
btn_more.hide();
return false;
}
var href = obj_a.attr('href'),
contBox = $(".js-ajax-list"),
pageBox = $(".ajax-page");
$(".ajax-page").remove();
$.ajax({
type: "get",
url: href,
beforeSend: function () {
btn_more.show();
},
success: function (dat) {
var ajaxDom = $(dat).find(".js-ajax-list"),
ajaxa = $(dat).find(".ajax-page a.next"),
ajaxPage = $(dat).find(".ajax-page");
if (ajaxDom.html() && ajaxDom.html().trim().length > 0) {
contBox.append(ajaxDom.html());
pageBox.html(ajaxPage.html());
$('img.lazyload').lazyload({
threshold: 200,
effect: 'fadeIn'
});
ajax_more_bol = true;
}
if (ajaxa.length <= 0 || ajaxa.attr('href') == null || ajaxa.attr(
'href') == 'javascript:;') {
btn_more.hide();
return false;
}
}
});
}
}
})
效果如下：
jquery ajax实例下载，需要放服务器端才能运行
