Pbootcms文章内容页使用AJAX实现无刷新顶踩功能

PbootCMS是一款轻量级CMS系统，下面我将介绍如何通过AJAX技术实现文章内容页的无刷新顶踩（点赞/反对）功能。要在PbootCMS文章内容页使用AJAX实现无刷新的顶踩功能，你可以按照以下步骤进行操作：

首先，在PbootCMS的文章内容页中添加顶踩按钮，并为顶踩按钮添加相应的类名，用于标识顶踩功能的实现。

<a class="dc_d support"><b id="support_number">{content:likes}</b></a> 
<a class="dc_c support_cai"><b id="support_number_cai">{content:oppose}</b></a> 
<p class="supported"></p>   <!--已赞提示-->
<p class="supported_cai"></p>   <!--已赞提示-->

其次，在模板底部放置AJAX代码，如下：

<script>
$('.support').on('click', function() {
    $.ajax({
        url: '{content:likeslink}',  // 点赞链接
        data: {
            'likes': 'likes'
        },
        success: function(data) {
            $('#support_number').load(location.href + " #support_number");  // 点赞后刷新#support_number
            if (data.state) {} else {
                $(".supported").html("已点赞！").fadeIn().animate({top: '-20px'}, 500).fadeOut(1000);  // 显示已点赞提示并添加动画效果
            }
        },
        error: function(xhr, status, error) {
            console.log(error);
        }
    });
});
$('.support_cai').on('click', function() {
    $.ajax({
        url: '{content:opposelink}',  // 差评链接
        data: {
            'oppose': 'oppose'
        },
        success: function(data) {
            $('#support_number_cai').load(location.href + " #support_number_cai");  // 点赞后刷新#support_number
            if (data.state) {} else {
                $(".supported_cai").html("已差评！").fadeIn().animate({top: '-20px'}, 500).fadeOut(1000);  // 显示已差评提示并添加动画效果
            }
        },
        error: function(xhr, status, error) {
            console.log(error);
        }
    });
});
</script>

要实现图片同样的点赞按钮，可以参考一下CSS，图片自己去阿里图标库下载即可！

/* 顶踩按钮 */
.dc_d{display:block;float:left;background: #3c0d76 url('../images/zan.png') no-repeat 8px 5px; background-size: 20px 20px; margin-right:20px;padding:8px 15px 8px 35px;border-radius:5px;border:1px #8688e5 solid;;color:#fff;}
.dc_c{display:block;float:left;background: #3c0d76 url('../images/cai.png') no-repeat 8px 5px; background-size: 20px 20px; margin-right:20px;padding:8px 15px 8px 35px;border-radius:5px;border:1px #8688e5 solid;color:#fff;}

最后不要忘记引入jquery库