当点击点赞按钮时,不能用ajax改变帖子的点赞数
Can't change number of likes for post in tape with ajax, when click like button
我正在尝试学习django和更多。在计算每个帖子的点赞数时遇到了问题。问题是我无法获取帖子的id。如果我刷新页面,点赞数会发生变化。但是用ajax改变它是一个真正的问题。请解释一下,如果点击点赞按钮,如何为磁带中的每个帖子更改点赞计数。
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 %}
这是贴的带子。
{% 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 %}
这是一个计算帖子点赞数的视图
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
更新:
{% 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 %}
稍微改变一下视图,像这样(添加data-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 %}
一些改进方法。
第一…您总是希望计数的HTML存在,并且只有在没有点赞或显示为零时才应该隐藏它。否则你需要添加html与javascript当第一个喜欢被投票
接下来var postlikescount = $(".post-likes-count");
这将包括页面....中具有该类的所有元素而不是你点击按钮时想要的那个
相反,你可以把你想要的作为参数传递给updatePostLikesCount()
function updatePostLikesCount(){
var postlikescount = $(".post-likes-count");
function updatePostLikesCount(postlikescount){
在click处理程序modify中我们传入了合适的元素
success: function() {
// which count element
var $countElement = img.next();
// pass to function
updatePostLikesCount($countElement);
}
相关文章:
- Ajax响应并没有改变我的视图模型
- AJAX jQuery成功,但没有改变
- 为什么将变量的console.log()移动到第二个AJAX调用中会改变输出?
- 我如何用ajax改变这个变量
- 当我执行循环时,AngularJs/Ajax索引正在改变
- AJAX数据库更新与CSS按钮颜色改变使用Codeigniter
- 如何通过ajax改变javascript中的局部变量
- Ajax数据不会改变
- 改变我的imagsrc使用ajax从db获取位置
- 变量的值没有被改变(Ajax验证)
- 当url目录改变时,Ajax不向php发送请求
- jQuery ajax表单提交响应在重新提交时不改变
- 在angularJS中调用ajax后改变视图
- 改变锚标记href通过ajax加载
- 被Ajax改变的大整型
- 当值改变时,Javascript/ajax更新数据库
- 值在ajax调用之间不会改变
- Textarea在ajax调用中不会改变
- 使用jQuery/AJAX改变选择框的内容
- 表css属性不改变ajax调用后