django ajax like button with css classes

大佬教程收集整理的这篇文章主要介绍了django ajax like button with css classes，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决django ajax like button with css classes？

你好，我有一个帖子模型，它有一个 like(m2m) 和 user(forgeinkey) 模型字段，我试图检查 request.user 是否喜欢这个帖子，如果喜欢，我应该给他们看一个红心按钮否则应该显示一个蓝心，因为现在有多个帖子和喜欢，我循环遍历每个喜欢的对象以检查 request.user 是否喜欢它。不幸的是，由于某种原因，我无法实现一个好的逻辑，我看到每个用户都喜欢按钮。一些帮助将不胜感激。

这是我的模型：

class post(models.Model):
    user = models.ForeignKey(User,default='',related_name='has_liked',on_delete=models.CASCADE)
    caption = models.CharFIEld(max_length=100)
    image = models.fileFIEld(upload_to='images/',null=True,blank=TruE)
    vIDeo = models.fileFIEld(upload_to='vIDeos/',blank=TruE)
    created = models.datetiR_588_11845@eFIEld(auto_Now_add=TruE)
    like = models.ManyToManyFIEld(User,blank=True,default='')

视图：

@login_required
def usersFeed(request):
    users = User.objects.all()
    posts = post.objects.filter(Q(user__in=request.user.profile.frIEnd.all()) | Q(user=request.user)).order_by('-created')
    comments = Comment.objects.all()
    status_form = StatusForm(request.POST)
    frIEnd_requests = FrIEndrequest.objects.filter(to_user=request.user)
    frIEnds = request.user.profile.frIEnd.all()
    for i in posts:
        likes = i.like.all()
        print(likes)
        for like in likes:
            if like.username == request.user.username:
                if request.user:
                    Hasliked = True
                    print('liked')
                else:
                    Hasnotliked = True
                    print('not liked')
    context = {
        'Post':posts,'User':users,'form':PostForm(),'Profile':profile,'Form':CommentForm(),'Comment':comments,'Status':status_form,'fr':frIEnd_requests,'frIEnd':frIEnds,'Hasliked':Hasliked,'Hasnotliked':Hasnotliked,}
    return render(request,'social_media/Feed.HTML',context=context)

AJAX like counter 的视图：

@login_required
def like_post(request):
    Post = get_object_or_404(post,ID=request.GET.get('post_ID'))
    CSSClass = 'colorRed'
    if Post.like.filter(ID=request.user.ID).exists():
        Post.like.remove(request.user)
    else:
        Post.like.add(request.user)
    count = Post.like.count()
    users = Post.like.all() 
    user = []
    for i in users:
        user.append((i.userName))
    response = {
        'count':count,'users':user,'CSSClass':CSSClass,}
    return JsonResponse(responsE)

HTML 代码：

{% for i in Post %}
<form action="{% url 'like_post' %}" class='like-submit' data-catID="{{ i.ID }}" method="GET">
    <div class="like">
            {% if Hasliked == True %}
                <button ID="likeBtn{{ i.ID }}" class="likeClassBtn colorRed">
                    <i class="fas fa-heart"></i>
                </button>
            {% endif %}
            {% if Hasnotliked == True %}
                <button ID="likeBtn{{ i.ID }}" class="likeClassBtn">
                    <i class="fas fa-heart"></i>
                </button>                      
            {% endif %}
            <div class="show_likes">
            <span ID="likes_count{{ i.ID }}">{{ i.@R_528_10586@l_likes }}</span>
            <div class="username_liked">
                <div ID="user-likes{{ i.ID }}" class="user-likes">
                    {% for p in i.like.all %}
                    {{ p.username }}
                    {% endfor %}
                </div>
            </div>
            </div>
    </div>
</form>
{% endfor %}

<script>
    $(document).ready(function () {
            $(".like-submit").submit(function (event) {
                event.preventDefault()
                const url = $(this).attr('action');
                const catID = $(this).attr("data-catID");
                $.AJAX({
                        type: "GET",url: url,data: {
                            post_ID: catID,},success: function (data) {
                            $('#likes_count' + catID).HTML(data.count)
                            if ($('#user-likes' + catID).HTML()){
                                $('#user-likes' + catID).HTML(data.users + ' ')
                                $('#likeBtn' + catID).toggleClass(data.CSSClass)
                            }
                        }
                });
            });
    });
</script>

解决方法

{% if i.id in Hasliked %}   
  <button id="likeBtn{{ i.id }}" class="likeClassBtn colorRed">
    <i class="fas fa-heart"></i>   
  </button> 
{% endif %} 
{% if i.id in Hasnotliked %}   
  <button id="likeBtn{{ i.id }}" class="likeClassBtn">
    <i class="fas fa-heart"></i>   
  </button>
{% endif %}

    friends = request.user.profile.friend.all()
    for i in posts:
        likes = i.like.all()
        print(likes)
        for like in likes:
            if like.username == request.user.username:
                if request.user:
                    Hasliked.append(i.id)
                    print('liked')
                else:
                    Hasnotliked.append(i.id)
                    print('not liked')

大佬总结

以上是大佬教程为你收集整理的django ajax like button with css classes全部内容，希望文章能够帮你解决django ajax like button with css classes所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。