Django文章詳情頁面ajax點贊功能

小編:啊南 8閱讀 2020.12.21

使用技術

利用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 %}
關聯標簽:
欧美日韩在线精品视频二区_日本高清在线精品一区_天天看片天天av免费观看