Как написать кнопку типа ajax для объекта типа django, использующего внешний ключ?

Я пытался написать jquery ajax кнопку, которая останавливала бы эффект перезагрузки страницы, когда объект поста нравится, но у меня возникли трудности, потому что мой объект модели like использует внешний ключ в моем webapp, Так как я могу сделать это с полем многие ко многим, но моя проблема в том, что когда я изменю мою кнопку like на поле ManyToMany, я не смогу восстановить уже понравившийся пост в моем приложении, и я нахожу, что было бы намного удобнее, если бы я мог написать jQuery ajax для обработки внешнего ключа объекта like вместо этого. Вот что мне удалось придумать, но это не приводит в действие кнопку "Мне нравится"!

#Model for like 
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)

View.py

def like_button(request, pk, c_slug=None):
    user = request.user
    if request.method =="POST":
        if request.POST.get("operation") == "like_submit" and is_ajax(request=request):
            content_id=request.POST.get("content_id",None)
            content=get_object_or_404(Like,pk=content_id)
            if liked.likes.filter(id=request.user.id): #already liked the content
                content.likes.remove(request.user) #remove user from likes 
                liked=False
            else:
                content.likes.add(request.user) 
                liked=True
                resp = {
                   'liked':liked,'like_id':content_id,
                    }
            response = json.dumps(resp)
            return HttpResponse(response,content_type = "application/json")
    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)
    return redirect('shop:product_detail', product.id, product.slug)

jQuery ajax

    // AJAX CALL
$('.likin').click(function(){
    $.ajax({
             type: "POST",
             url: "{% url 'shop:add_like'  %}",
             data: {'content_id': $(this).attr('name'),'operation':'like_submit','csrfmiddlewaretoken': '{{ csrf_token }}'},
             dataType: "json",
             success: function(response) {
              selector = document.getElementsByName(response.content_id);
                    if(response.liked==true){
                      $(selector).css("color","blue");
                    }
                    else if(response.liked==false){
                      $(selector).css("color","black");
                    }


              }

        });

  })

Html кнопка like

<button class="likin" class="btn btn-white mr-3 like" id="likebtn{{ product.id }}" name="{{product.id}}" >
    {% if product in liked %} 
<a  name="{{product.id}}" class="likin" 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="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 name="{{product.id}}" class="likin"  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 %}
 </button>

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