javascript - 如何让不喜欢按钮在喜欢后立即显示，反之亦然？在 Django 中

Question

我已经成功创建了一个可以工作的“喜欢”按钮，如果我喜欢一个帖子，计数器就会增加，并且它不会立即显示“喜欢”按钮，我必须刷新页面才能显示它，甚至在刷新后它也会显示类似，而不是不喜欢，但如果我点击它，它会减少计数，即不喜欢它。

那么如何让不喜欢按钮在喜欢后立即显示，反之亦然？谢谢。

代码如下:

models.py

class Post(models.Model):
    author = models.ForeignKey('auth.User')
    title = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    published_date = models.DateTimeField(blank=True,null=True)
    likes = models.IntegerField(default=0)

    def publish(self):
        self.published_date = timezone.now()
        self.save()

    def __str__(self):
        return self.title

views.py

def like_post(request):
    liked = False
    if request.method == 'GET':
        post_id = request.GET['post_id']
        post = Post.objects.get(id=int(post_id))
        if request.session.get('has_liked_'+post_id, liked):
            print("unlike")
            if post.likes > 0:
                likes = post.likes - 1
                try:
                    del request.session['has_liked_'+post_id]
                except KeyError:
                    print("keyerror")
        else:
            print("like")
            request.session['has_liked_'+post_id] = True
            likes = post.likes + 1
    post.likes = likes
    post.save()
    return HttpResponse(likes, liked)

def post_detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    Post.objects.get(pk=pk)
    post_id = post.pk
    liked = False
    if request.session.get('has_liked_' + str(post_id), liked):
        liked = True
        print("liked {}_{}".format(liked, post_id))
    context = {'post': post, 'liked': liked}
    return render(request, 'blog/post_detail.html', {'post': post})

urls.py

url(r'like_post/$', views.like_post, name='like_post'),

ajax-blog.js

$('#likes').click(function(){
    var postid;
    postid= $(this).attr("data-post_id");
    $.get('/blog/like_post/', {post_id: postid}, function(data){
               $('#like_count').html(data);
               $('#likes').hide();
    });
});

post_detail.html

<p>
    <strong id="like_count">{{ post.likes }}</strong> people like this category

{% if user.is_authenticated %}
    <button id="likes" data-post_id="{{post.id}}"  class="btn btn-primary" type="button">
    {% if liked %}
        <span class="glyphicon glyphicon-thumbs-down"></span>
        Unlike
        </button>
    {% else %}
        <span class="glyphicon glyphicon-thumbs-up"></span>
        Like
        </button>
    {% endif %}
{% endif %}
</p>

Answer 1

$('#likes').click(function(){
    $('.like_span').toggleClass('glyphicon-thumbs-down glyphicon-thumbs-up');
    var postid;
    postid= $(this).attr("data-post_id");
    $.get('/blog/like_post/', {post_id: postid, liked:$('.like_span').hasClass('glyphicon-thumbs-up')}, function(data){
               $('#like_count').html(data);
               $('#likes').hide();
    });
});

然后添加类like_span

<span class="like_span glyphicon glyphicon-thumbs-up"></span>
<span class="like_span glyphicon glyphicon-thumbs-down"></span>

然后在 View 中，您将获得 request.GET['liked'] 作为 true 或 false。将该值视为增加和减少