[英]Ajax Integration with Django and Font Awesome Icon Change
我有一个 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 后,如何更改点赞数?
试试这个
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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.