帝国CMS列表内AJAX无刷新点赞代码

帝国CMS列表内AJAX无刷新点赞代码

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2023-06-29 08:14:55
文章简介

帝国CMS列表内AJAX无刷新点赞,实现实时交互体验。代码简洁高效,减少页面重载,提升用户点赞效率。优化用户体验,提升网站互动率,是建站必备利器。

  • 正文开始
  • 相关阅读
  • 推荐作品

实现列表内AJAX无刷新点赞,直接上代码,注意需要jquery.min.js支持!

列表模板里写:

<script type="text/javascript"> 
$(".icon-thumbs-up").click(function(event){ 
  event.preventDefault(); 
  var mythis = $(this); 
  var classid = mythis.data("classid"); 
  var id = mythis.data("id"); 
  $.ajax({ 
    type:"GET", 
    url:"[!--news.url--]e/public/digg/", 
    data:{"classid":classid,"id":id,"dotop":1,"doajax":1,"ajaxarea":"diggnum"}, 
    dataType:"text", 
    success:function(data){ 
      var reinfo = data.split("|"); 
      if (reinfo.length != 1) { 
        if (reinfo[0] != "") { 
          mythis.find("em").html(reinfo[0]); 
        } 
        if (reinfo[2] != "") { 
          //var left = parseInt(mythis.offset().left)+20, top = parseInt(mythis.offset().top); 
          var left = 20, top = mythis.find("em").get(0).offsetHeight; 
          $(".zan").remove(); 
          if (reinfo[2] == "谢谢您的支持") { 
            mythis.append('<div class="zan">+1 谢谢您的支持</div>'); 
            //$("body").append('<div class="zan">+1 谢谢您的支持</div>'); 
          }else{ 
            mythis.append('<div class="zan">已赞</div>'); 
            //$("body").append('<div class="zan">已赞</div>'); 
          } 
          //"text-shadow":"0 1px 0 rgba(0,0,0,0.5)","font-family":"simsun" 
           $(".zan").css({"position":"absolute","z-index":"10","left":left+"px","top":-top+"px","color":"inherit","width":"120px","height":"60px","background":"#fff","border-radius":"6px"}).animate({top:-top-30},"slow",function(){$(this).fadeIn("fast").remove();}); 
        } 
      }else{} 
    } 
  }); 
}); 
</script>


列表内容模板需要点赞的地方写:

<a href="[!--titleurl--]" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="icon-thumbs-up" data-classid="[!--classid--]" data-id="[!--id--]"><span class="font"><i class="fa fa-heart-o"></i><em>[!--diggtop--]</em>个赞</span></a>


帝国CMS默认编辑器增加输入ID一键插入信息到内容的功能
« 上一篇 2023年06月27日
帝国CMS点卡功能优化-后台生成点卡和前台点卡充值无需密码
下一篇 » 2023年08月03日

如本文对您有帮助,就请墨鱼抽根烟吧!