时间戳

首页 > 解决方案 > Django - 如何将 AJAX 按钮中的数据添加到 html 中，以便每次单击按钮时都会更新？

javascript - Django - 如何将 AJAX 按钮中的数据添加到 html 中，以便每次单击按钮时都会更新？

问题描述

目前，我已经设置了一个类似 ajax 的按钮。控制台显示，当我按下按钮时，like count 正在切换，但我如何实际检索“like_count”变量以放入我的 HTML。我的按钮代码是：

<script type="text/javascript">

  function toggleLike(){
        $.ajax({
          url: "{% url 'photo_blog-post_like_api' post.id %}",
          data: {like_count: 'like_count', 'csrfmiddlewaretoken': '{{ csrf_token }}'},
          dataType: "json",
          success: function(data) {
            console.log(data);
          }
          });
      };

</script>

按钮的 html 是：

<input type="button" onclick="toggleLike()" value="Like"/>

我的观点的代码是：

    class LikePostAPI(APIView):
        authentication_classes = (authentication.SessionAuthentication,)
        permission_classes = (permissions.IsAuthenticated,)

    def get(self, request, slug=None, format=None, pk=None):
        obj = get_object_or_404(Post, id=pk)
        user = self.request.user
        updated = False
        liked = False
        if user.is_authenticated:
            if user in obj.likes.all():
                liked = False
                obj.likes.remove(user)
                like_count = obj.likes.count()
            else:
                liked = True
                obj.likes.add(user)
                like_count = obj.likes.count()
            updated = True
        data = {
            "updated": updated,
            "liked": liked,
            "like_count": like_count
        }
        return Response(data)

标签： javascriptpythonjqueryajaxdjango

解决方案

您可以将此行添加到 ajax 请求的成功函数中：

$("#likeCount").html(data.like_count);

其中 likeCount 是要放置值的 html 标记的 Id，例如：

<div id="likeCount"></div>

推荐阅读