Question

我正在创建一个网站，允许用户搜索论文列表。一旦返回论文列表，用户可以单击“喜欢”或“不喜欢”到一个或多个论文。用户点击“赞”按钮后，“赞”计数应动态更新。

我正在使用jquery处理类似计数的动态更新。但是，我不确定如何告诉ajax WHICH ID中的success函数进行更新。原因是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>

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

2 个答案: