Почему я не могу получить json-ответ django с помощью javascript fetch API?

Я новичок в JavaScript. Я работаю над проектом, в котором я использую Django в бэкенде. Моя функция Django views будет производить JSON-ответ, который получит мой javascript fetch. Вот моя функция Django views, которая производит ответ JSON. Моя цель - сделать кнопку like, которая будет обновлять внешний вид кнопки like и количество лайков при нажатии на эту кнопку без перезагрузки всей страницы. Это последнее требование моего проекта. Я пытаюсь долго, несколько дней.

def likepost(request,posts_id):
  posts = NewPost.objects.get(id = posts_id)
  is_like = False
  for like in posts.likepost.all():
    if like == request.user and request.method == "POST":
        is_like = True
        break

  if not is_like:
     posts.likepost.add(request.user)

  else:
    posts.likepost.remove(request.user)
  posts.save()
  # serialize_obj = serializers.serialize("json",posts_id)

  return JsonResponse({
    "is_like" : is_like,
    "num_like" : posts.likepost.count()
   },safe=False)

Мой javascript будет делать API из данных JSON, сгенерированных вышеупомянутой функцией views, используя fetch. Вот полный код моего javascript.

document.addEventListener("DOMContentLoaded",function(e){
    // const colon = document.createElement('div');
    // colon.setAttribute('id','colon')
    e.preventDefault()
    // const likebtn = document.createElement('button');
    // likebtn.setAttribute('class','likebtn btn btn-primary');
    // likebtn.setAttribute('class','likebtn');
    // document.querySelector('.card-footer').appendChild(likebtn);
    // document.querySelector('.likebtn').innerHTML = "Like";
    document.querySelector(`#likebtn${posts_id}`).onsubmit = like_function();
    // document.querySelector('.likepost').addEventListener('click', ()=> like_function('likepost'));
})



// let is_like = "{{is_like}}";
// let num_like = "{{num_like}}";

function like_function(){
    // document.createElement('button').innerHTML = "Love";
    fetch(`/like/${posts_id}`)
    // ,{
    //     method:"POST",
    //     body : JSON.stringify({
    //         "is_like" : is_like,
    //         "num_like" : num_like,
    //     })
    // })
    .then(response => response.json())
    .then(result => {
        if(result.is_like){
            document.querySelector(`#likebtn${posts_id}`).innerHTML = "Unike";
            // location.replace("http://127.0.0.1:8000")
        }
        else{
            document.querySelector(`#likebtn${posts_id}`).innerHTML = "Like";
            // location.replace("http://127.0.0.1:8000")
        }
    })
    
}

// function like_function(){
//     if (document.querySelector("#like").style.color == "blue"){
//         document.querySelector("#like").style.color = "red";
//     }else{
//         document.querySelector("#like").style.color = "blue";
//     }
// }

Вот мой файл urls.py.

urlpatterns = [
   path("", views.index, name="index"),
   path("login", views.login_view, name="login"),
   path("logout", views.logout_view, name="logout"),
   path("register", views.register, name="register"),
   path("profile/<int:id>",views.profilepage,name="profile"),


    
    path("profile/<int:id>/following/addfollower",views.followersPeople,name="addfollower"),
   path("profile/<int:id>/following/removefollower",views.followersRemove,name="removefollower),
    path("postform", views.createpost, name="postform"),
    path("editform/<int:id>",views.editpost,name="editpost"),
    path("following",views.followerspost,name="following"),
    path("like/<int:posts_id>",views.likepost, name="likepost"),
    path("postpage/<int:id>",views.view_post,name="postpage"),
]+ static(settings.MEDIA_URL, document_root= settings.MEDIA_ROOT)

Я также делюсь своим шаблоном здесь.

{% load static %}
<div class="card-footer">
   
    <form action="{% url 'likepost' posts_id=posts.id %}" class="likeform" method="POST" style="display: inline;">
        {% csrf_token %}
        <button id="likebtn{{posts.id}}" class="btn btn-link" type="submit">Like</button>
    </form>
    <small class="num_of_likes">{{ posts.likepost.all.count }}</small>
    
    {% block script %} 
        <script>
            let posts_id = "{{ posts.id }}";
        </script>
        <script src="{% static 'network/controller.js' %}"></script>
    {% endblock %}
    <button class="btn btn-link" style="text-decoration: none;">Comment</button>
    <a href="{% url 'postpage' id=posts.id %}" class="btn btn-link" style="text-decoration: none;">View Post</a>
    {% if request.user.id is posts.user.id %}
        <a href="{% url 'editpost' id=posts.id %}" class="btn btn-link" style="text-decoration: none;">Edit</a>
       
    {% endif %}
    <div class="likepost"></div>
</div>

Мой проект не работает нормально. Когда я нажимаю на кнопку "Мне нравится", она отображается как это

вместо обновления кнопки like в кнопку unlike и количество лайков, а также страница не перезагружается. Что мне делать? Пожалуйста, дайте мне знать, если мне нужно поделиться другими частями кода, хотя я вижу, что мой код намного сложнее.

В вашем видео похоже, что форма отправляется вместо того, чтобы предотвратить POST по умолчанию.

    document.querySelector(`.likeform`).onsubmit = () => like_function();

Посмотрите этот ответ для получения более подробной информации о .onsubmit

Вернуться на верх