使用 ajax 在 django 中制作类似按钮

Question

How I can make like button in Django using ajax my html, I need to click like button without reload the page, The ajax function didn't work

  <form method="POST" action="{% url 'video:like' video.pk %}">
  {% csrf_token %}
  <input type="hidden" class="likin" name="next" value="{{ request.path }}">
  <button class="remove-default-btn" type="submit">
      <i class="fa fa-thumbs-up" aria-hidden="true"><span>{{ video.likes.all.count }}</span></i>
  </button>

JavaScript

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


          }

    });

})

Answer 1

You have added an event on the buttons click but that will not stop the forms submission (your button has type="submit" and submits the form). Instead of adding an event on the button's click instead add an event on the forms submission and prevent it. Next submit it yourself using ajax.

First in your form tag add an id:

<form method="POST" action="{% url 'video:like' video.pk %}" id="my-like-form">

Next add an event to the form submission:

$("#my-like-form").submit(function(e){
    e.preventDefault(); // Prevent form submission
    let form = $(this);
    let url = form.attr("action");
    $.ajax({
        type: "POST",
        url: url,
        data: form.serialize(),
        dataType: "json",
        success: function(response) {
            selector = document.getElementsByName(response.next);
            if(response.liked==true){
                $(selector).css("color","blue");
            } else if(response.liked==false){
                $(selector).css("color","black");
            }
        }
    })
})