前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django文章详情页面ajax点赞功能

Django文章详情页面ajax点赞功能

作者头像
菲宇
发布2019-07-31 15:12:01
8410
发布2019-07-31 15:12:01
举报
文章被收录于专栏:菲宇菲宇

使用技术

利用Ajax点赞 并 局部刷新页面 绑定事件 点赞和绑定 灵活处理 利用F 页面局部刷新 点赞数 反序列json获取布尔值

视图

布尔值,必须用Json反序列化才能使用 F的妙用 点赞数自加1

def digg(request):

    # ajax 是json格式,特殊情况下需要反序列
    import json
    from django.db.models import F  # 利用F来做自加1操作

    article_id = request.POST.get('article_id')

    is_up = json.loads(request.POST.get('is_up'))  # 必须反序列化才能为布尔值
    # 点赞人即当前登陆人
    user_id = request.user.pk

    # 过滤已经点赞或者踩了的
    obj = models.ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()

    # 返回json
    response = {'state': True, 'msg': None}

    if not obj:
        ard = models.ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=True)
        # 生成了赞记录, 然后再来更新页面
        if is_up:  # 如果是赞就更新赞
               models.Article.objects.filter(pk=article_id).update(up_count=F('up_count')+1)
        else:
            # 踩的时候
            models.Article.objects.filter(pk=article_id).update(down_count=F('down_count')+1)
    else:
        response['state'] = False
        response['handled'] = obj.is_up  # 将已经做过的操作提示

    return JsonResponse(response)  # 必须用json返回

点赞板块HTML

Ajax局部刷新功能

{% extends 'base.html' %}

{# 继承公共部分 #}

{% block content %}
    {% csrf_token %}
    <h3 class="text-center">{{ article_obj.title }}</h3>
    <div class="cont">
        {{ article_obj.content|safe }}
    </div>
    <div id="div_digg">
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>{# 动态获取点赞数 #}
        </div>
        <div class="buryit action">
            <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
        </div>
        <div class="clear"></div>
        <div class="diggword" id="digg_tips" style="color: red;">
            {#            您已经推荐过#}
        </div>

        <script>
            {# 点赞和踩 ,两个标签加上action  is_up为布尔值 #}
            $('#div_digg .action').click(function () {
                var is_up = $(this).hasClass('diggit')
                {# ajax来操作点赞功能 #}
                $.ajax({
                    url: '/digg/',
                    type: 'post',
                    data: {
                        'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),  //token值
                        'is_up': is_up,
                        'article_id': '{{ article_obj.pk }}',
                    },
                    success: function (data) {
                        if (data.state) {
                            // Ajax 局部刷新!!!

                            // 判断是否是点赞
                            if(is_up){
                                var val = parseInt($('#digg_count').text());
                                $('#digg_count').text(val+1)
                            }else{
                                var val = parseInt($('#bury_count').text());
                                $('#bury_count').text(val+1)
                            }

                        }
                        else {
                            if (data.handled) {
                                $('#digg_tips').html('你已经推荐过')
                            } else {
                                $('#digg_tips').html('你已经反对过')
                            }
                            setTimeout(function () {  // 设置时钟函数,一秒钟后消失
                                $('#digg_tips').html('')  //清空
                            }, 1000)

                        }
                    }
                })
            })

        </script>

    </div>
{% endblock %}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年07月29日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档