javascript - Django 和 Javascript - Like 按钮不起作用

Question

我是 Django 和 Javascript 的新手——我正在制作一个在网站上发布帖子的项目，我想在每个帖子上创建一个“喜欢”按钮。到目前为止，这是我的代码 - 我根本没有收到任何错误。浏览器中也没有控制台错误。但什么也没有发生。当你点击心形图时，如果它被点赞，它应该是一个红色的图像。不喜欢的时候就是白心形象。目前，当我单击图像时，它只是保持白色。它始终默认为那个白色图像。代码不起作用。任何帮助表示赞赏。

点赞按钮的views.py：

@csrf_exempt
def like(request):
    if request.method == "POST":
        post_id = request.POST.get('id')
        is_liked = request.POST.get('is_liked')
        try:
            post = Post.objects.get(id=post_id)
            if is_liked == 'no':
                post.like.add(request.user)
                is_liked = 'yes'
            elif is_liked == 'yes':
                post.like.remove(request.user)
                is_liked = 'no'
            post.save()

            return JsonResponse({'like_count': post.like.count(), 'is_liked': is_liked, 
"status": 201})
        except:
            return JsonResponse({'error': "Post not found", "status": 404})
    return JsonResponse({}, status=400)

views.py 用于显示所有帖子的页面：

def index(request):
    list_of_posts = Post.objects.all().order_by('id').reverse()
    paginator = Paginator(list_of_posts, 10)
    page_number = request.GET.get('page', 1)
    page_obj = paginator.get_page(page_number)

    return render(request, "network/index.html", {
        "list_of_posts": list_of_posts,
        "page_obj": page_obj
    })

Javascript 文件：

like = document.querySelectorAll(".liked");
edit = document.querySelectorAll(".edit");
text_area = document.querySelectorAll(".textarea");

like.forEach((element) => {
  like_handeler(element);
});

function like_handeler(element) {
    element.addEventListener("click", () => {
      id = element.getAttribute("data-id");
      is_liked = element.getAttribute("data-is_liked");
      icon = document.querySelector(`#post-like-${id}`);
      count = document.querySelector(`#post-count-${id}`);

      form = new FormData();
      form.append("id", id);
      form.append("is_liked", is_liked);
  
        fetch("/like/", {
        method: "POST",
        body: form,
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.status == 201) {
          if (res.is_liked === "yes") {
              icon.src = "https://img.icons8.com/plasticine/100/000000/like.png";
              element.setAttribute("data-is_liked", "yes");
             } else {
             icon.src =
                "https://img.icons8.com/carbon-copy/100/000000/like--v2.png";
              element.setAttribute("data-is_liked", "no");
            }
            count.textContent = res.like_count;
          }
        })
        .catch(function (res) {
          alert("Network Error. Please Check your connection.");
        });
    });
  }

每个帖子的 html 文件：index.html：

{% extends "network/layout.html" %}
{% load static %}
{% block body %}
    <h3> Welcome. Here is your news feed: </h3>

{% for i in page_obj %}

<div class='card mb-3' style="max-width: 530px;" id="card-posts">

        <div class="row no-gutters">
                <div class="col-md-8">
                  <div class="card-body">
                    <h5 class="card-title"><a href="{% url 'profile' username=i.username 
%}">{{i.username}}</a></h5>
                    <p class="card-text">{{i.text}}</p>
         
                    <div class="like mt-3">

                        <img
                        data-id="{{i.id}}"
                        id="post-like-{{i.id}}"
                          class="liked"
                          {% if not request.user in i.like.all %}

                          data-is_liked="no"
                          src="https://img.icons8.com/carbon-copy/100/000000/like--v2.png"
                  {%else%}
                  data-is_liked="yes"
                          src="https://img.icons8.com/plasticine/100/000000/like.png"
                          {%endif%}
                        />
                    
                        <span id="post-count-{{post.id}}">{{i.like.count}}</span>
                  </div>

                  </div>
                </div>
              </div>
            </div>
{% endfor %}

{% block script %}  
 <script src="{% static 'network/network.js'%}"></script> 
{% endblock %}

当我点击页面上的“喜欢”心形按钮时，这就是我得到的。当我单击一次时，会发生 2 的每个实例。所以这张图片来自点击心形按钮 3 次：

标签： javascriptdjangodjango-viewsdjango-templates