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

【问题标题】：How make Like button in django using ajax如何使用ajax在django中制作Like按钮
【发布时间】：2021-03-01 17:22:47
【问题描述】：

如何将 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>

【问题讨论】：

分享你的Video 模型？
好的，先生，这是我的模特
有错误Reverse for 'like' with arguments '(141,)' not found. 1 pattern(s) tried: ['video/account/video/like$']
你在urls.py中的网址是什么path
` path('account/video/like', addRemoveLike, name="like"),`

标签： django django-models django-views django-forms django-templates

【解决方案1】：

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

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

那么就可以使用下面的代码了：

views.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)
        }
    })
})

urls.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

【讨论】：