使用ajax在django中制作like按钮答案

【问题标题】：make like button in django using ajax使用ajax在django中制作like按钮
【发布时间】：2021-05-29 18:31:33
【问题描述】：

如何使用 ajax 在 Django 中制作类似按钮我的html，我需要点击like按钮而不重新加载页面，ajax功能不起作用

  <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");
                }


          }

    });

})

【问题讨论】：

标签： javascript django ajax django-views django-templates

【解决方案1】：

您在按钮单击时添加了一个事件，但这不会停止表单提交（您的按钮有type="submit" 并提交表单）。而不是在按钮的点击上添加一个事件，而是在表单提交上添加一个事件并阻止它。接下来使用 ajax 自己提交。

首先在你的表单标签中添加一个id：

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

接下来在表单提交中添加一个事件：

$("#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");
            }
        }
    })
})

【讨论】：