在django中使用ajax制作like按钮

Question

如何在Django中使用ajax制作按钮我的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");
}

}
});
})

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