时间戳

首页 > 解决方案 > 如何使用ajax在django中制作Like按钮

django - 如何使用ajax在django中制作Like按钮

问题描述

我如何将 Django 中的点赞按钮连接到 ajax 以及当按钮点击点赞数 +1 时，如果再次点击点赞数 -1

这是我的视频模型模型

class Video(models.Model):
    author = models.ForeignKey(Account, on_delete=models.CASCADE)
    video = models.FileField(upload_to='post-videos', validators=[validate_file_extension])
    title = models.CharField(max_length=100)
    description = models.TextField(null=True, blank=True)
    created_date = models.DateTimeField(auto_now_add=True)
    likes = models.ManyToManyField(Account, blank=True, related_name='likes', default=None)

我的观点

class AddLike(LoginRequiredMixin, View):
    def post(self, request, pk, *args, **kwargs):
        video = Video.objects.get(pk=pk)

        is_dislike = False


        for dislike in video.dislikes.all():
            if dislike == request.user:
                is_dislike = True
                break

        if is_dislike:
            video.dislikes.remove(request.user)

        is_like = False

        for like in video.likes.all():
            if like == request.user:
                is_like = True
                break

        if not is_like:
            video.likes.add(request.user)

        if is_like:
            video.likes.remove(request.user)

        next = request.POST.get('next', '/')
        return HttpResponseRedirect(next)

我的模板 html

  <form method="POST" action="{% url 'video:like' video.pk %}" id="my-like-form">
     {% csrf_token %}
     <input type="hidden" class="likin" name="next" value="{{ request.path }}">
     <button class="remove-default-btn" type="submit" id="openPopup" class="remove-default-btn like-btn{{ request.path }}" style="border: none; ">
         <i class="fa fa-thumbs-up" aria-hidden="true"><span class="">{{ video.likes.all.count }}</span></i>
     </button>
 </form>

标签： djangodjango-modelsdjango-viewsdjango-formsdjango-templates

解决方案

您可以使用JsonResponse（Django Docs）并创建一个simple view（Django Docs）。

我假设这likes是与模型many2many相关的字段User。

然后您可以使用以下代码：

视图.py：

from django.http import JsonResponse

def add_remove_like(request, pk):
    data = {}
    video = Video.objects.get(pk=pk)

    if request.method == "POST":
        user = request.user
        if video.likes.filter(id=user.id).exists():
            liked = False
            video.likes.remove(user)
        else:
            video.likes.add(user)
            liked = True


    data["count"] = video.likes.count()
    data["liked"] = liked
    return JsonResponse(data)

.html：

$("#my-like-form").submit(function(e){
    e.preventDefault(); 

    var form = $(this);
    let url = form.attr("action");

    $.ajax({
        type: "POST",
        url: url,
        data: form.serialize(),
        dataType: "json",
        success: function(response) {
            var btn = form.find("button[type='submit']");

            if (response.liked) {
                console.log('Hello');
                btn.css("color", "blue");
            } else {
                btn.css("color", "black");
            }
            btn.find("span").text(response.count)
        }
    })
})

网址.py：

from django.contrib.auth.decorators import login_required

path('account/video/<int:pk>/like', login_required(views.add_remove_like), name='add_remove_like'),

注意：我将视图重命名为add_remove_like

推荐阅读