单击“赞”按钮时，无法使用 ajax 更改磁带中 post 的赞数

Question

我正在尝试学习 django 以及更多知识。计算磁带中每个 post 的点赞数时遇到问题。问题是我无法获得 post 的 ID。如果我刷新页面，喜欢的次数会发生变化。但是用 ajax 改变它是真正的问题。请解释一下，如果点击“赞”按钮，如何使磁带中每个 post 的点赞次数发生变化。

Ajax代码。

{% block jquery %}

function updatePostLikesCount(){
    var postlikescount = $(".post-likes-count")
    $.ajax({
        type: "GET",
        url: "/like_post/{{ post.id }}/post_likes_count/",
        success: function(data){
            postlikescount.html(data.count);
        },
        error: function(response, error){
        }
    })
}

$(".post-like").click(function(event){
    var img = $(this);
    event.preventDefault();
    $.ajax({
        url: img.parent().attr('href'),
        success: function(){
            updatePostLikesCount();
        },
        error: function(response, error){
        }
    })
});

{% endblock %}

这是 post 的磁带。

{% for post in tape %}
    ...
    {{ post.text }}
    ...
    <a href="/like_post/{{ post.id }}/">
        <img class="post-like"  src="{% static "" %}"/>
    </a>

            <span class="post-likes-count" >
                {{ post.like.liked_users.count }}
            </span>

{% endfor %}

这是一个计算 post 的点赞次数的视图

def post_likes_count(request, post_id, *args, **kwargs):
    if request.is_ajax():
        like = Like.objects.get(post_id=post_id)
        if like.liked_users.count == None:
            count = 0
        else:
            count = LikeTimestamp.objects.filter(like_id=like.id).count()
        return JsonResponse({
            'count': count,
        })
    else:
        raise Http404

否则，我尝试重新加载带有赞的页面元素，但失败了:-)

Answer 1

一些改进方法。

首先...您总是希望计数的 html 存在并且应该只在没有点赞或显示为零时隐藏它。否则，您需要在第一次投票时添加 html 和 javascript

下一个

var postlikescount = $(".post-likes-count");

这将包括页面中具有该 class 的所有元素....而不是您单击按钮时想要的特定元素。

相反，您可以将您想要的那个作为参数传递给 updatePostLikesCount()

改变

function updatePostLikesCount(){
        var postlikescount = $(".post-likes-count");

至

function updatePostLikesCount(postlikescount){

并在点击处理程序中进行修改，以便我们传入适当的元素

success: function() {
     // which count element
     var $countElement = img.next();
     // pass to function
     updatePostLikesCount($countElement);
}

Answer 2

更新：

{% block jquery %}
    function updatePostLikesCount(postlikescount){
        $.ajax({
            type: "GET",
            url: "/like_post/"+postlikescount.data().id+"/post_likes_count/",
            success: function(data){
                alert('class is '+postlikescount.parent().find('.post-likes-count').attr('class'));
                postlikescount.parent().find('.post-likes-count').html(data.count).show();
                alert('likes count '+data.count);
            },
            error: function(response, error){
            }
        })
    }

    $(".post-like").click(function(event){
        var img = $(this);
        event.preventDefault();
        $.ajax({
            url: img.parent().attr('href'),
            success: function(){
                var like = img.parent();
                updatePostLikesCount(like);
            },
            error: function(response, error){
            }
        })
    });
{% endblock %}

稍微像这样更改视图（添加数据 ID）：

{% for post in tape %}
    ...
    {{ post.text }}
    ...
    <a href="/like_post/{{ post.id }}/" data-id="{{post.id}}">
        <img class="post-like"  src="{% static "" %}"/>
    </a>

     <span class="post-likes-count" {% if post.like.liked_users.count == 0 %}style="display:none;"{% endif %}>
                {{ post.like.liked_users.count }}
     </span>
{% endfor %}

单击“赞”按钮时，无法使用 ajax 更改磁带中 post 的赞数

Can't change number of likes for post in tape with ajax, when click like button

javascript

django

ajax

jquery

posts