之前帮客户做网站的时候,如果要实现点击按钮加载更多新闻的功能,利用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' });
if(obj_a.attr('href') == ajaxa.attr('href')){
contBox.find(".ajax-page a.next").attr('href',"javascript:;");
ajaxa.attr('href',"javascript:;");
}
ajax_more_bol = true; } if (ajaxa.length <= 0 || ajaxa.attr('href') == null || ajaxa.attr('href') == 'javascript:;') { btn_more.hide(); return false; } } }); } } })
效果如下:

jquery ajax实例下载,需要放服务器端才能运行