jquery ajax实例:鼠标滚动显示更多新闻,同时利于SEO,不用写服务器端代码【推荐】

之前帮客户做网站的时候,如果要实现点击按钮加载更多新闻的功能,利用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实例:鼠标滚动显示更多新闻,同时利于SEO,不用写服务器端代码【推荐】

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

点击查看jquery ajax实例效果

相关推荐

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址