django與ajax喜歡和不像

Question

我，所以我用django寫了一個應用程序，並實現了一個像和不同的功能，但我注意到它工作正常，但問題是，如果用戶喜歡一個帖子，並決定不喜歡它，喜歡。計數將變爲-1而不是0，因此有可能兩個用戶喜歡變成3，但如果兩個中的一個不變，它就會變成1。下面是我的jQuery函數 jQuery的

$(document).ready(function(){ 
      function updateText(btn, newCount, verb){ 
      btn.text(newCount + " " + verb) 
     } 
     $(".like-btn").click(function(e){ 
     e.preventDefault() 
     var this_ = $(this) 
     var likeUrl = this_.attr("data-href") 
     var likeCount = parseInt(this_.attr("data-likes")) | 0 
     var addLike = likeCount + 1 
     var removeLike = likeCount - 1 
     if (likeUrl){ 
      $.ajax({ 
      url: likeUrl, 
      method: "GET", 
      data: {}, 
      success: function(data){ 
       console.log(data) 
       var newLikes; 
       if (data.liked){ 
        updateText(this_, addLike, "Unlike") 
       } else { 
        updateText(this_, removeLike, "Like") 
        // remove one like 
       } 
      }, error: function(error){ 
       console.log(error) 
       console.log("error") 
      } 
      }) 
     } 

     }) 
    }) 

view.html

<p><a class='like-btn' data-href='{{ obj.get_api_like_url }}' data-likes='{{ obj.likes.count }}' href='{{ obj.get_like_url }}'>{{ obj.likes.count }} Like</a></p> 

View.py

from rest_framework.views import APIView 
from rest_framework.response import Response 
from rest_framework import authentication, permissions 

class PostLikeAPIToggle(APIView): 
    authentication_classes = (authentication.SessionAuthentication,) 
    permission_classes = (permissions.IsAuthenticated,) 

    def get(self, request, slug=None, format=None): 
     # slug = self.kwargs.get("slug") 
     obj = get_object_or_404(Post, slug=slug) 
     url_ = obj.get_absolute_url() 
     user = self.request.user 
     updated = False 
     liked = False 
     if user.is_authenticated(): 
      if user in obj.likes.all(): 
       liked = False 
       obj.likes.remove(user) 
      else: 
       liked = True 
       obj.likes.add(user) 
      updated = True 
     data = { 
      "updated": updated, 
      "liked": liked 
     } 
     return Response(data) 

如果需要我我的代碼的任何其他部分會很樂意提供。謝謝

Answer 1

當用戶喜歡或不喜歡某個帖子時，您還沒有更新data-likes。因爲頁面不會刷新包含data-likes屬性的標籤，因此值{{ obj.likes.count }}將不會在用戶界面上重新呈現。

if (data.liked) { 
    // ... 
} else { 
    // ... 
} 
// update the `data-likes` 
this_.data('likes', likeCount); 

注意：您可以使用.data()方法來訪問數據 - *屬性，而不是使用attr。
編號：jQuery .data() docs

Answer 2

每當你喜歡從this_.data

var likeCount = parseInt(this_.attr("data-likes")) | 0 

所以你需要更新的文字數量和喜歡計數數據

if (data.liked) { 
    updateText(this_, addLike, "Unlike") 
    this_.attr("data-likes", addLike) // update this data 
} else { 
    updateText(this_, removeLike, "Like") 
    this_.attr("data-likes", removeLike) // update this data 
    // remove one like 
} 

Answer 3

我嘗試模擬的情況下， html + js：

<p> 
<a class='like-btn' data-href='#' data-likes='' href='#'> Like 
</a> 
</p> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    function updateText(btn, newCount, verb){ 
    btn.text(newCount + " " + verb) 
    } 

    var startCount = Math.round(Math.random() * 10) 
    $(".like-btn").attr("data-likes", startCount) 
    updateText($(".like-btn"), startCount, "Like") 

    $(".like-btn").click(function(e){ 
    e.preventDefault() 
    var this_ = $(this) 

    var likeCount = parseInt(this_.attr("data-likes")) | 0 
    console.log(likeCount) 
    var addLike = likeCount + 1 
    var removeLike = likeCount - 1 
    if (Math.random() * 10 > 5) { 
     console.log("Like") 
     updateText(this_, addLike, "Like") 
     this_.attr("data-likes", addLike) // update this data 
    } else { 
     console.log("Unlike") 
     updateText(this_, removeLike, "Unlike") 
     this_.attr("data-likes", removeLike) // update this data 
    } 

    }) 
}) 
</script> 

確實它工作正常嗎？如果是的話，我希望它能幫助你。