Soy nuevo en javascript. Estaba trabajando en un proyecto de Django para hacer una aplicación de redes sociales. Tengo un problema con el botón Me gusta que actualizará el color del botón Me gusta y la cantidad de Me gusta de forma asíncrona sin recargar la página. Aquí estoy compartiendo mi plantilla de Django que tiene el código del botón Me gusta.

 <form action="{% url 'likepost' posts_id=posts.id %}" id="likeform" method="POST" style="display: inline;"> {% csrf_token %} <button id = "like" class="btn btn-link">Like</button> </form> <small id="num_of_likes">{{ posts.likepost.all.count }}</small>

A través del botón que contiene id = "like" , mi código javascript recibirá la variable de plantilla de Django y obtendrá la API de Django. Aquí está mi código js.

 document.addEventListener("DOMContentLoaded",function(){ document.querySelector('#like').addEventListener('click', ()=> like_function('like')); }) function like_function(like){ fetch(`/index/${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('#like').innerHTML = "Unike"; } else{ document.querySelector('#like').innerHTML = "Like"; } }) }

Aunque mi método de vistas de Django devuelve datos JSON, quiero que mi código js obtenga esos datos JSON y regrese a mi página de inicio. Aquí está el error que obtuve:

No entendí lo que realmente estaba pasando. Quiero que mi método javascript me lleve de vuelta a mi página de inicio. Esto es lo que he visto a lo que realmente me estoy enfrentando. https://youtu.be/PV6ctAQNA64