Why does my like button return a Json object { liked: true } but doesn't work with my ajax call in Django when a user clicks the like button

Question

I have been trying to create a like button with calling an ajax function in Django, But somehow whenever i click on the like button it redirect me to different page with a json object that return {liked: true }. 为什么会遇到这个问题。 弄清楚它对我来说是一个挑战，它与我的javascripts或views.py中的function有什么关系，我怎样才能更好地阻止这种效果！ 并使页面在用户喜欢时不重新加载！ 这是我喜欢的功能！

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 %}

Answer 1

看起来您实际上并没有一个赞按钮，而是您有指向您的赞 url 的链接 - 所以显然单击这些链接会将您带到这些网址。 它看起来也不像您的任何元素都具有like class，因此您的 JQuery AJAX 代码不会被任何东西触发。

我建议使用实际的<button> HTML 元素 - 如果您将like的 class 附加到它，那么它应该可以按预期工作。