Почему моя кнопка like возвращает объект Json { liked: true }, но не работает с моим ajax вызовом в Django, когда пользователь нажимает на кнопку like

Я пытался создать кнопку like с вызовом ajax функции в Django, но почему-то всякий раз, когда я нажимаю на кнопку like, она перенаправляет меня на другую страницу с json объектом, который возвращает {liked : true }. почему я получаю эту проблему! Это было проблемой для меня, чтобы выяснить это, и имеет ли это какое-то отношение к моим javascripts или к моей функции в views.py Как лучше я могу сделать это, чтобы остановить эффект! и сделать страницу не перезагружать, когда пользователям нравится! Вот моя функция like!

def like(request, pk, c_slug=None):
    user = request.user
    if request.POST.get("operation") == "like_submit" and is_ajax(request=request):
               liked=get_object_or_404(Like,pk=pk)
    product = Product.objects.get(pk=pk, slug=c_slug)
    liked= False
    like = Like.objects.filter(user_like=user, product=product)
    if like:
        like.delete()
    else:
        liked = True
        Like.objects.create(user_like=user, product=product)
        resp = {
        'liked':liked,
         }
        response = json.dumps(resp)
        return HttpResponse(response,content_type = "application/json")

model.py

class Like(models.Model):
    user_like = models.ForeignKey(settings.AUTH_USER_MODEL, related_name='user_likes', on_delete=models.CASCADE)
    product = models.ForeignKey(Product, related_name='user_likes', on_delete=models.CASCADE)
    like_date = models.DateTimeField(auto_now=True)

Это мои скрипты для ajax вызова

<script>
    $(".like").click(function (e) {
    var id = this.id;
    var href = $('.like').find('a').attr('href');
    e.preventDefault();

    $.ajax({
        url: href,
        data: 
        {'liked': $(this).attr('name'),
        'operation':'like_submit',
        'csrfmiddlewaretoken': '{{ csrf_token }}'},
        success: function(response){
          if(response.liked){
            $('#likebtn' + id).html("Unlike");
            $('#likebtn' + id).css("color", "gray")
          }
          else{
            $('#likebtn' + id).html("Like");
            $('#likebtn' + id).css("color", "blue")
          }
        }
      })
});
</script>

мой HTML

{% if product in liked %}
<a href='{% url "shop:like" product.id product.slug %}' id="likebtn{{ product.id }}"  class="flexitems-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-10">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="blue" width="22"height="22" class="dark:text-gray-100">
     <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
     </svg>
         </div>
              <div >Unlike</div></a>
    {% else %}
  <a href='{% url "shop:like" product.id product.slug %}' id="likebtn{{ product.id }}"  class="flex items-center space-x-2">
    <div class="p-2 rounded-full text-black lg:bg-gray-10">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="22" height="22" class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
  </svg>
   </div>
      <div >Like</div>
        </a>
   {% endif %}

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