Javascript 当按下按钮时,Django for loop会多次激活视图
我一直在一个博客网站上工作,当然你会在上面发布一些东西。我有一个index.html,其中有:Javascript 当按下按钮时,Django for loop会多次激活视图,javascript,jquery,python,ajax,django,Javascript,Jquery,Python,Ajax,Django,我一直在一个博客网站上工作,当然你会在上面发布一些东西。我有一个index.html,其中有: {% for post in posts %} {% include "blog/featuredpost.html" %} {% endfor %} 我还使用了Django分页。 现在,我想做的是一个“喜欢”和“不喜欢”按钮,它是可重用的,这意味着我可能希望它出现在“blog/featuredpost.html”中。所以,这就是我所做的 <div class="row"> <di
{% for post in posts %} {% include "blog/featuredpost.html" %} {% endfor %}
我还使用了Django分页。
现在,我想做的是一个“喜欢”和“不喜欢”按钮,它是可重用的,这意味着我可能希望它出现在“blog/featuredpost.html”中。所以,这就是我所做的
<div class="row">
<div class="col-sm-5">
<div id="divLikes" class="col-sm-6 bg-success text-center">
Likes: {{ post.likes }}
</div>
<div id="divDislikes" class="col-sm-6 bg-danger text-center text-block">
Dislikes: {{ post.dislikes }}
</div>
</div>
{% if user.is_authenticated %}
<div>
<div class="col-sm-2">
<form id="like_form" action="" method="POST">
{% csrf_token %}
<button id="like_button" type="submit" value="vote" class="btn btn-success btn-sm btn-block">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Like
</button>
</form>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm btn-block">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Dislike
</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-warning btn-sm btn-block">
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Comment
</button>
</div>
</div>
{% endif %}
我现在有它,所以它只会打印出某些东西。在首页上,由于AJAX成功功能,它实际上只是复制了html/css部分。我如何让like按钮明确地知道我希望在我点击的某个帖子上有一个like?因为,就像现在一样,它只是对页面上所有其他帖子的id进行垃圾处理,没有特定的顺序。问题是有一堆节点具有相同的id(
#like#form
和#like#u button
),并且向所有节点添加事件。不允许有多个元素具有相同的id
值。
从表单中删除属性id
,将按钮的id
更改为class
,并将其值设置为帖子的id,即:
<button type="submit" value="{{ post.id }}" class="vote_button btn btn-success btn-sm btn-block">
我有点明白你在说什么,但我不知道“将事件与课堂挂钩”是什么意思。我对javascript和ajax几乎没有经验,所以,如果您不介意的话,您能正确地修复我的脚本吗?从我收集的信息来看,你是说不需要“like”表单,因为javascript已经理解了投票按钮,因为正如你所说的,它应该是绑定的。无论如何,谢谢你,真诚地。它不是显示页面上的五篇文章,而是显示被点击了五次的文章。而且,success函数也应该刷新div,因此它将like0更改为like1i。我通过将vote_button类命名为vote_button{{{post.id}解决了这个问题,这样我们就有了一个后面有一个id的类,它可以为每个帖子工作。
def view_like(request):
# AJAX Like Button
if request.user.is_authenticated:
if request.method == 'POST':
likepostId = request.POST.get('LikeId', '')
print(likepostId)
likepost = get_object_or_404(Post, id=likepostId)
print(likepost.title + " has " + str(likepost.likes))
response_data = {}
return JsonResponse(response_data)
else:
raise Http404
return 200
<button type="submit" value="{{ post.id }}" class="vote_button btn btn-success btn-sm btn-block">
<script type="text/javascript">
$(".vote_button").click(function(event) {
event.preventDefault();
$.ajaxSettings.traditional = true;
$.ajax({
type: 'POST',
url: '{% url "like" %}',
dataType: 'json',
data: {
csrfmiddlewaretoken: '{{ csrf_token }}',
LikeId: $(event.target).val(),
},
success: function(response) {
/* I am not sure what is this supposed to do
load() expects url as the first parameter, not a node
*/
$('#divLikes').load('#divLikes', function() {
$(this).children().unwrap()
})
}
});
});
</script>