Django for 循环在按下按钮时多次激活视图

Django for-loop activates view multiple times when a button is pressed

本文关键字：激活 视图 按钮 for 循环 Django      更新时间：2023-09-26

我一直在做一个博客网站，当然你会在上面发布东西。我有一个索引.html其中有这个： 

{% 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 %}


 <script type="text/javascript">
       //$('#like_button').click(function(){ }); 
/* The for cycle sends all the posts id that should appear on the page. 
It should send just the one on which the like button is clicked. */
$(document).on('submit', '#like_form', function(event) {
event.preventDefault();
$.ajaxSettings.traditional = true;
$.ajax({
    type: 'POST',
    url: '{% url "like" %}',
    dataType: 'json',
    data: {
        csrfmiddlewaretoken: '{{ csrf_token }}',
        LikeId: {{ post.id }},
    },
    success: function(response) {
        $('#divLikes').load(' #divLikes', function() { 
            /* It's important to add the space before #divLikes, I don't know why */
            $(this).children().unwrap()
        })
    }
});

}）

views.py

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

我目前有它，所以它只会打印出某些东西。在首页上，由于AJAX成功函数，它实际上只是复制了html/css部分。如何让"赞"按钮明确知道我想在我点击的某个帖子上点赞？因为，就像现在一样，它只是向页面上所有其他帖子的所有 id 发送垃圾邮件，没有特定的顺序。

问题是你有一堆具有相同 id 的节点（#like_form 和 #like_button ），并且你向所有这些节点添加事件。不允许有多个具有相同值的元素 id 。从form中删除属性id，将button的id更改为class，并将其值设置为帖子的id，即：

<button type="submit" value="{{ post.id }}" class="vote_button btn btn-success btn-sm btn-block">

然后将事件挂.vote_button类，并提交其值（因此ajax请求中的data.LikeId将类似于 $(event.target).val() ）到 Idenfity 您投票的帖子

编辑：

JavaScript大致如下所示：

<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>
相关文章：