在 Django 中使用 jquery 在 for 循环中刷新内容

Question

我正在创建一个允许用户搜索论文列表的网站。一旦返回论文列表，用户可以对一篇或多篇论文点击“喜欢”或“不喜欢”。当用户点击like按钮时，like count应该动态更新。

我正在使用 jquery 来处理点赞数的动态更新。但是，我不确定如何告诉 ajax 中的 success 函数要更新哪个 id。原因是id 是动态生成的，它取决于哪些论文作为搜索结果返回给用户。

到目前为止，我在模板中有以下内容：

{% for result in results %}
 <li >
{{ result.title}},
<a href="#" class="like_button" data-pid="{{ result.pk }}"> <span class="like_span fa fa-thumbs-up"></span> </a>

 <strong id="like_count_{{ result.pk }}">{{result.likes}} </strong> 
</li> 
{% endfor %}

如您所见，我将希望动态更新发生的部分的 id 指定为"like_count_{{ result.pk }}"。我不确定这是否是最好的方法。

jquery 部分如下所示：

    <script>
        $(document).ready(function(){
          $(".like_button").click(function(){
                $.ajax({
                    type: "GET",
                    data: {'pk': $(this).data('pid'),
                           'liked': $("span").hasClass('fa fa-thumbs-up') },
                    url: "{% url 'search:paperpreference' %}",
                    success: function(response) {
                        var pk  = $(this).data('pid');
                        $(?????).html(response.likes )
                    },
                    error: function(response, error) {
                        alert(error);
                    }
                });
            });
          });
    </script>

简单地说，我不知道如何指定 ?????部分这样，当成功时，新的喜欢计数仅更新到该特定论文，而不是循环中的第一篇论文。

views.py 目前有以下内容：

def paperpreference(request):
   # if request.method == "GET":
    pid = request.GET['pk']
    paper = Paper.objects.get(pk=pid)
    likes = paper.likes + 1
    paper.likes = likes
    paper.save()
    data = {'likes': paper.likes}

    return JsonResponse(data)

我是 Jquery 的新手，任何帮助将不胜感激！

Answer 1

感谢@dirkgroten 的建议，现在可以通过以下 jquery 函数动态更新点赞数。诀窍是将 pk 声明移到 ajax 之前。

    <script>
        $(document).ready(function(){
          $(".like_button").click(function(){
                var pk = $(this).data('pid')
                $.ajax({
                    type: "GET",
                    data: {'pk': pk,
                           'liked': $("span").hasClass('fa fa-thumbs-up') },
                    url: "{% url 'search:paperpreference' %}",
                    success: function(response) {
                        $("#like_count_"+ pk).html(response.likes )
                    },
                    error: function(response, error) {
                        alert(error);
                    }
                });
            });
          });
    </script>

Answer 2

另一个选项是从服务器返回 id。

def paperpreference(request):
   # if request.method == "GET":
    pid = request.GET['pk']
    paper = Paper.objects.get(pk=pid)
    likes = paper.likes + 1
    paper.likes = likes
    paper.save()
    data = {'likes': paper.likes,'pid':pid}

    return JsonResponse(data)

<script>
        $(document).ready(function(){
          $(".like_button").click(function(){
                var pk = $(this).data('pid')
                $.ajax({
                    type: "GET",
                    data: {'pk': pk,
                           'liked': $("span").hasClass('fa fa-thumbs-up') },
                    url: "{% url 'search:paperpreference' %}",
                    success: function(response) {
                        $("#like_count_"+ response.pid).html(response.likes )
                    },
                    error: function(response, error) {
                        alert(error);
                    }
                });
            });
          });
    </script>