使用 Django，如何在不重新加载页面的情况下重新加载特定的按钮参数？

Question

我正在为社交网络类型的网站创建一种点赞方法。目前，我可以通过每次用户喜欢它时重新加载整个页面来更新喜欢计数。但与其他网站一样，它没有这种效果。我想消除重新加载，但我无法做到。我尝试了一个异步调用，但它只适用于第一个元素，我不知道如何继续消除这种更新方法。

每张卡片的 HTML：

<div class="col-sm-12 col-md-8 offset-md-2 mt-5 p-0 post-container">
    <div class="media pt-3 pl-3 pb-1">
        <a href="{% url "users:detail" post.user.username %}">
            <img class="mr-3 rounded-circle" height="35" src="{{ post.profile.picture.url }}" alt="{{ post.user.get_full_name }}">
        </a>
        <div class="media-body">
            <p style="margin-top: 5px;">{{ post.user.get_full_name  }}</p>
        </div>
    </div>

    <img style="width: 100%;" src="{{ post.photo.url }}" alt="{{ post.title }}">

    <p class="mt-1 ml-2" >
        <a style="color: #000; font-size: 20px;" id="like_heart" data-id="{{ post.pk }}" data-url="{% url 'posts:likes2' %}">
            <i class="{% if request.user in post.likes_users.all %} fas fa-heart {% else %} far fa-heart {% endif %}"
             id="success_like"></i>
        </a> <i id="value_like">{{ post.likes_users.count }}</i>
    </p>
    <p class="ml-2 mt-0 mb-2">
        <b>{{ post.title }}</b> - <small>{{ post.created }}</small>
    </p>
</div>

AJAX 调用：

$(document).ready(function(){
    // ajax for call in post
    $("#like_heart").on("click",function(e){
        // e.preventDefault();
        var id = $(this).data("id");
  
        $.ajax({
        //   url: 'posts/likes2/',
          url: $(this).data("url"),
          data: {
            'pk': id
          },
          dataType: 'json',
          success: function (data) {
            if (data['like']) {
                $('#success_like').removeClass("far fa-heart").addClass("fas fa-heart");
            }
            else {
                $('#success_like').removeClass("fas fa-heart").addClass("far fa-heart");
            }
            var body = '<i id="value_like">' + data['value'] +'</i>'
            $('#value_like').html( body );
          }
        });
    })
})

查看：

def likes_view(request):
    pk = request.GET.get('pk', None)
    post_id = Posts.objects.get(pk=pk)
    likes_users = User.objects.get(username=request.user)

    if post_id.likes_users.filter(username=request.user).exists():
        post_id.likes_users.remove(likes_users)
    else:
        post_id.likes_users.add(likes_users)
    data = {'like': post_id.likes_users.filter(username=request.user).exists(), 'value': post_id.likes_users.count()}
    return JsonResponse(data)

Answer 1

问题在于多个 DOM 元素具有相同的 id，这不仅违反了 HTML 规范，而且让您没有机会找到所需的 #value_like。

你可以这样修复它，模板：

    <div class="media pt-3 pl-3 pb-1">
        <a href="{% url "users:detail" post.user.username %}">
            <img class="mr-3 rounded-circle" height="35" src="{{ post.profile.picture.url }}" alt="{{ post.user.get_full_name }}">
        </a>
        <div class="media-body">
            <p style="margin-top: 5px;">{{ post.user.get_full_name  }}</p>
        </div>
    </div>

    <img style="width: 100%;" src="{{ post.photo.url }}" alt="{{ post.title }}">

    <p class="mt-1 ml-2" >
        <a style="color: #000; font-size: 20px;" class="like-link" data-id="{{ post.pk }}" data-url="{% url 'posts:likes2' %}">
            <i class="{% if request.user in post.likes_users.all %} fas fa-heart {% else %} far fa-heart {% endif %} like-toggle" data-id="{{ post.pk }}"></i>
        </a> <i class="like-count" data-id="{{ post.pk }}">{{ post.likes_users.count }}</i>
    </p>
    <p class="ml-2 mt-0 mb-2">
        <b>{{ post.title }}</b> - <small>{{ post.created }}</small>
    </p>

JS：

$(document).ready(function() {
  // ajax for call in post
  $(".like-link").on("click", function(e) {
    // e.preventDefault();
    var id = $(this).data("id");

    $.ajax({
      //   url: 'posts/likes2/',
      url: $(this).data("url"),
      data: {
        'pk': id
      },
      dataType: 'json',
      success: function(data) {
        if (data['like']) {
          $('.like-toggle[data-id=' + id + ']').removeClass("far fa-heart").addClass("fas fa-heart");
        } else {
          $('.like-toggle[data-id=' + id + ']').removeClass("fas fa-heart").addClass("far fa-heart");
        }
        var body = '<i id="value_like">' + data['value'] + '</i>'
        $('.like-count[data-id=' + id + ']').html(body);
      }
    });
  })
})

我为您需要使用的每个元素添加了data-id 属性。现在我使用classes 和data-id 访问它们。抱歉，我无法自己测试它，但即使我有一个类型，你也明白了。