Django ajax如何更改代码以使用ajax来喜欢文章而不刷新

Question

我正在尝试创建一个类似的按钮。目前我有它，这样用户可以喜欢/不喜欢文章上的帖子。但是，只要他们按下按钮，页面就会重置，并将他们带回顶部。我想用Ajax来解决这个问题。这些是我的项目文件

index.py

<form action="{% url 'like-article-view' %}" method="POST" class="mb-1">
{% csrf_token %}
<input type="hidden" name="article_id" value={{article.id}}>
<button type="submit" class="ui primary button" name="{{article.id}}" id="like-unlike-btn">

{% if user not in article.liked.all%}
Like
{% else %}
Unlike
{% endif %}
</button>

view.py

def like_unlike_post(request):
    user = request.user.id

    if request.method == 'POST':
        article_id = request.POST.get('article_id')
        article_obj = Article.objects.get(id=article_id)
        user_ = CustomUser.objects.get(id = user)

        if user_ in article_obj.liked.all():
            article_obj.liked.remove(user_)
        else:
            article_obj.liked.add(user_)

        like, created = Like.objects.get_or_create(user=user_, article_id=article_id )
        if not created:
            if like.value=='Like':
                like.value='Unlike'
            else:
                like.value='Like'
        else:
             like.value='Like'       
        article_obj.save()
        like.save()

    return redirect('index')

url.py（相关URL）

path('', views.indexView, name="index")
path('liked/', views.like_unlike_post, name='like-article-view'),

models.py（相关模型）

class Article(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    category = models.ForeignKey(Category, on_delete = models.CASCADE)
    liked = models.ManyToManyField(settings.AUTH_USER_MODEL, blank=True, related_name='likes')

LIKE_CHOICES = (
    ('Like', 'Like'),
    ('Unlike', 'Unlike'),
)

class Like(models.Model): 
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    article = models.ForeignKey(Article, on_delete=models.CASCADE)
    value = models.CharField(choices=LIKE_CHOICES, max_length=8)
    updated = models.DateTimeField(auto_now=True)
    created = models.DateTimeField(auto_now_add=True)

在这种情况下，我将如何实现Ajax？我试过寻找教程，但不知道如何将其应用到我的应用程序中。任何帮助都将不胜感激。 谢谢

Answer 1

查看教程：How to Use AJAX with Django。它引导您完成使用Jquery和Vanilla JavaScript向Django发出AJAX请求的过程

以下是您需要做的：

class LikeArticleView(LoginRequiredMixin, View):
    def post(self, request, *args, **kwargs):
        article = Article.objects.get(pk=request.POST.get("id"))
        qs = article.liked.all()

        if request.user in qs:
            return HttpResponse("Already liked the article.")
        else:
            article.loved.add(request.user)
            return HttpResponse("You liked the Article")

呈现文章模板时，在like按钮上设置data-id={{ article_id }}。当您将文章作为POST请求正文的一部分发送时，可以使用JavaScript检索文章id。这将允许您获取正确的文章并更新类似的计数

在发出AJAX Post请求时，需要设置CSRF令牌头；否则，Django将引发错误。上面的教程介绍了这一点

您将提交POST请求的端点也将是：

path('liked/', views.like_unlike_post, name='like-article-view'),

您可以将likeurl作为数据属性输出，如上面的id，并使用JS获取它