2017-04-20 18 views
0

我已經成功創建了一個類似的按鈕,它的工作原理是,如果我喜歡帖子,計數器會遞增,並且不會立即顯示不同的按鈕,我必須刷新頁面才能顯示,甚至在刷新後像,而不是不像,但如果我點擊它減少了數量,即不喜歡它。如何在喜歡它後立即使不喜歡按鈕顯示,反之亦然?在Django

那麼如何讓喜歡它後立即顯示不喜歡按鈕,反之亦然?謝謝。

下面的代碼:

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> 

回答

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> 
在視圖中你會得到 request.GET['liked']爲真或false.Treat該值

然後增減

0

其中一個很好的方式來處理不刷新頁面,當用戶點擊喜歡或不喜歡。

相反,使用jquery ajaxrest api(DRF)增加下降等等計數。

使用jQuery切換圖標,而不是Django的模板標籤條件{% if liked %}

+0

謝謝,但我對JS的瞭解不多,可否請你幫我解決,增加和減少c ount我有一個JS,但我怎麼不知道如何切換圖標 – Bharat