使用 Ajax 的按钮在 Django 项目中不起作用

Posted 2023-02-24

【中文标题】使用 Ajax 的按钮在 Django 项目中不起作用

【英文标题】：Like button using Ajax not working in Django project

【发布时间】：2021-04-29 17:11:15

【问题描述】：

我遇到了一个问题，我试图在我的 django 应用程序中实现一个“Like”按钮。

我有适用于模型的功能，即使在 html 模板中，如果我手动添加用户的喜欢，代码也可以工作。

似乎我的 Ajax 可能是问题所在，但我似乎无法弄清楚原因。

这是我的models.py：

class Post(models.Model):
    direct_url = models.URLField(unique=True)
    post_url = models.URLField()
    post_title = models.CharField(max_length=300)
    time_posted = models.DateTimeField(default=timezone.now)
    user = models.ForeignKey(User, on_delete=models.CASCADE)

class Like(models.Model):
    liker = models.ForeignKey(User, on_delete=models.CASCADE)
    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='likes')
    date_created = models.DateTimeField(default=timezone.now)

    def save(self, *args, **kwargs):
        super(Like, self).save(*args, **kwargs)

这是我的观点.py

class PostListView(LoginRequiredMixin, generic.ListView):
    model = Post
    template_name = 'homepage/home.html'
    ordering = ['-time_posted']
    context_object_name = 'posts'
    paginate_by = 6

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['now'] = datetime.now()
        context['likesbyuser'] = Like.objects.filter(liker=self.request.user)
        return context


def likePost(request):
    if request.method == 'GET':
        post_id = request.GET['post_id']
        likedpost = Post.objects.get(pk=post_id)  # getting the liked post

        if Like.objects.filter(post=likedpost, liker=request.user).exists():
            Like.objects.filter(post=likedpost, liker=request.user).delete()
        else:
            m = Like(post=likedpost, liker=request.user)  # creating like object
            m.save()  # saves into database
        return HttpResponse(likedpost.likes.count())
    else:
        return HttpResponse("Request method is not a GET")

这是模板的一部分，我在其中放置按钮以使用应该调用类似函数的 Ajax：

% for i in post.likes.all %
                    % if user == i.liker %
                            <a class='likebutton' data-catid=" post.id "><i id='like post.id ' class="btn fas fa-heart fa-lg post-buttons "></i></a>
                    % elif forloop.last %
                            <a class='likebutton' data-catid=" post.id "><i id='like post.id ' class="btn far fa-heart fa-lg post-buttons "></i></a>
                    % endif %

            % empty %
                    <a class='likebutton' data-catid=" post.id "><i id='like post.id ' class="btn far fa-heart fa-lg post-buttons "></i></a>

            % endfor %
% endfor %

这是我在脚本标签中添加到 base.html 的 Ajax 代码。

<script type="text/javascript">
$('main').on('click', '.likebutton', function()
    var catid;
    catid = $(this).attr("data-catid");
$.ajax(

    type:"GET",
    url: "/likepost/",
    data:
        post_id: catid
    ,
    success: function(data)

    if(data==0)
        $('.like' + catid).toggle();
        $('#like' + catid).toggleClass("far fas");
        $('#likecount' + catid).html('');
        console.log(data+'if');
    

    else if(data==1)
        if($('.like' + catid).is(":hidden"))
        
            $('.like' + catid).toggle();
        

        $('#like' + catid).toggleClass("far fas");
        $('#likecount' + catid).html(data + ' like');
        console.log(data+'elseif');
    
    else

        $('#like' + catid).toggleClass("far fas");
        $('#likecount' + catid).html(data + ' likes');
        console.log(data+'else');
        
    

)
);
</script>

我已经尝试添加 event.preventDefault();到 ajax 调用，但这并没有解决我的问题。

【参考方案1】：

我发现了问题。

我将 Ajax 代码指向“main”，如下面的 sn-p 所示：

...
<script type="text/javascript">
$('main').on('click', '.likebutton', function()
...

我的问题是，当我移植这个项目时，我忘记用主标签包围块了。

在我的 base.html 中，我添加了以下代码：

<main role="main" class="container h-100">
    % block content %
    % endblock content %
</main>

这解决了问题。