Ajax 與 Django 和 Font Awesome 圖標更改的集成

Question

我有一個 Django 應用程序，我想在其中顯示一個包含用戶帖子的頁面，通過單擊另一個位於錨標記中的 Font Awesome 圖標可以被其他用戶喜歡。 當用戶喜歡帖子時，應將圖標 class 從fa-heart更改為fa-heart-o ，反之亦然。 為了實現這一點，圖標上的單擊事件發出 Ajax 請求。 這會更改圖標並增加/減少類似計數。

我有這樣的FBV：

#feeds/views.py
@login_required
def like(request):
    post_id = request.GET.get("post_id", "")
    user = request.user
    post = Post.objects.get(pk=post_id)
    liked= False
    like = Like.objects.filter(user=user, post=post)
    if like:
        like.delete()
    else:
        liked = True
        Like.objects.create(user=user, post=post)
    resp = {
        'liked':liked
    }
    response = json.dumps(resp)
    return HttpResponse(response, content_type = "application/json")

在urls.py中：

urlpatterns=[
    path('like/', views.like, name='like'),
]

這是模板

{% for post in posts %}
......
</li>
<li>
    {% if post in liked_post %}
    <span class="like" data-toggle="tooltip" title="Unlike">
        <a href="{% url 'like' %}" id="like" post_id="{{ post.id }}"><i class="fa fa-heart"></i></a>
        <ins>{{ post.likes.count }}</ins>
    </span>
    </a>
    {% else %}
    <span class="like" data-toggle="tooltip" title="Like">
        <a href="{% url 'like' %}" id="like" post_id="{{ post.id }}"><i class="fa fa-heart-o"></i></a>
        <ins>{{ post.likes.count }}</ins>
    </span>
    </a>
    {% endif %}
</li>
...
{% endfor %}

這是 Ajax 調用。

$('#like').click(function (e) {
    console.log('requested !')
    var _this = $(this);
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "{% url 'like' %}",
        data:{
            post_id: _this.attr('post_id')
        }
        success: function (res) {
            if (res.liked){
                icon = _this.find("i");
                icon.toggleClass("fa-heart fa-heart-o");
                console.log('liked');
            }
            else{
                icon = _this.find("i");
                icon.toggleClass("fa-heart-o fa-heart");
                console.log('unliked');
            }
        }
    });
});

現在的問題是：每當我單擊心形圖標時，頁面都會被重定向到/like （我認為不會發生，因為使用了preventDefault(); ）並且我不能喜歡該帖子。 我怎么能解決這個問題？ 我嘗試過不同的解決方案，例如：

如何使用 ajax 調用更改圖標

使用 jquery 更改錨文本和圖標

如何使用 JavaScript 更改元素的 class？

更改jquery（django項目）中圖標的顏色

但這些都不適合我。 所以問題是我該如何實現呢？ 另外，在成功調用 ajax 后，如何更改點贊數？

Answer 1

試試這個

success: function (res) {
    if (res.liked){
        icon = _this.find("i");
        icon.removeClass();
        icon.addClass("fa-heart-o");
        console.log('liked');
    }
    else{
        icon = _this.find("i");
        icon.removeClass();
        icon.addClass("fa-heart");
        console.log('unliked');
    }

如果用戶喜歡該帖子，這將顯示fa-heart-o ，如果用戶不喜歡該帖子，則顯示 fa- fa-heart 。