如何在表单中使用 jquery 制作一个赞按钮，以便将其保存到数据库并更改赞按钮的样式？答案

【问题标题】：How to make a like button with jquery inside a form so that it will save it to database and also change the style of like button?如何在表单中使用 jquery 制作一个赞按钮，以便将其保存到数据库并更改赞按钮的样式？
【发布时间】：2020-08-26 22:59:25
【问题描述】：

我正在做一个 django 项目，我想在帖子中添加一个赞按钮。

就像一个普通的赞按钮 (https://i.stack.imgur.com/FJWH3.jpg)

这是我的模板：

 <form action="{% url 'like' post.id %}" method="GET" name="liked" class="l-form">
  {% csrf_token %}
    <button style="display: inline;" class="like__btn">
      <i class="like__icon fa fa-heart" style="display: inline;"></i> 
    </button>
</form>
   <script>
  $('.like__btn').on('click', function(){
$('.like__icon.fa-heart.fa').toggleClass("liked");
});
</script>

我只想这样做，当用户单击心形图标时，它将提交表单。但也将图标颜色更改为红色。（liked 类基本上是，color:red）

当我点击提交表单的按钮时，点赞数会增加，但随后会刷新页面，因此我的心形图标不会保持红色。

如果我添加

 type="button"

这次不刷新页面，改变图标颜色但不提交表单。

我尝试使用另一个按钮来提交表单并将其隐藏，但每当提交表单时，它都会刷新页面并返回白心。

也尝试返回false；在 jquery 中，但它不会再次提交表单。

我被困了几个小时，所以任何建议都会很棒！我不确定我是否应该以不同的方式来做，或者它会以这种方式工作。

【问题讨论】：

标签： javascript python jquery django

【解决方案1】：

正如@wmorrell 所提到的，您需要提交一个AJAX 请求。下面是一个简化示例，说明如何实现这一目标：

$(document).ready(function() {
  var like_counter = 0;
  $(".like__btn").click(function() {
    like_counter++;
    var reference = this;
    var postpk = $(this).data('postpk');
    var userpk = $(this).data('userpk');
    $.ajax({
      url: "//",  #put your relevant url here
      data: {like_counter: like_counter},
      success: function(result) {
    $(reference).addClass("liked");
  },
      })
});
})

在你的 html 中你有类似的东西：

<a href="javascript:" class="like__btn" data-postpk="{{post_pk}}" data-userpk="{{user_pk}}">Like</a>

【讨论】：

【解决方案2】：

您想要执行 AJAX 请求，因此“表单”通过提交过程，但没有清除当前页面状态的页面加载。这将涉及在您已经拥有的按钮上设置单击处理程序。然后，除了在按钮上设置类之外，还使用JQuery$.ajax()系列函数来模拟表单提交。

【讨论】：

【解决方案3】：

当您使用 HTML 提交表单时，它会刷新页面。解决此问题的一种方法是使用 jQuery 提交表单。

https://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59

请记住，一旦用户重新加载或重新访问页面，心脏将不再被“点赞”，也不会显示为红色。

【讨论】：