Django3 Like Ajax Button Book By Antonio Mele

Posted 2023-02-24

【中文标题】Django3 Like Ajax Button Book By Antonio Mele

【英文标题】：

【发布时间】：2021-06-23 04:55:46

【问题描述】：

它可以工作，但是当按下类似按钮时它计数 2099 而不是 1，刷新后它变成 1..当发生与相同问题不同时...刷新后正确计数....刷新之前计数 2099 或 3011 随机数

我尝试了一些来自 *** 的解决方案，但并没有给我带来更好的结果..

阿贾克斯：

% block domready %
  $('a.like').click(function(e)
    e.preventDefault();
    $.post('% url "images:like" %',
      
        id: $(this).data('id'),
        action: $(this).data('action')
      ,
      function(data)
        if (data['status'] == 'ok')
        
          var previous_action = $('a.like').data('action');

          // toggle data-action
          $('a.like').data('action', previous_action == 'like' ?
          'unlike' : 'like');
          // toggle link text
          $('a.like').text(previous_action == 'like' ? 'Unlike' :
          'Like');

          // update total likes
          var previous_likes = parseInt($('span.count .total').text());
          $('span.count .total').text(previous_action == 'like' ?
          previous_likes + 1 : previous_likes - 1);
        
      
    );
  );
% endblock %

html：

 % with total_likes=image.users_like.count users_like=image.users_like.all %
    <div class="image-info">
      <div>
        <span class="count">
          <span class="total"> total_likes </span>
          like total_likes|pluralize 
        </span>
        <span class="count">
           total_views  view total_views|pluralize 
        </span>
        <a href="#" data-id=" image.id " data-action="% if request.user in users_like %un% endif %like" class="like button">
          % if request.user not in users_like %
            Like
          % else %
            Unlike
          % endif %
        </a>
      </div>
       image.description|linebreaks 
    </div>
    <div class="image-likes">
      % for user in users_like %
        <div>
          <img src=" user.profile.photo.url ">
          <p> user.first_name </p>
        </div>
      % empty %
        Nobody likes this image yet.
      % endfor %
    </div>
  % endwith %
% endblock %

jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>
    <script>
      var csrftoken = Cookies.get('csrftoken');
      function csrfSafeMethod(method) 
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
      
      $.ajaxSetup(
        beforeSend: function(xhr, settings) 
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) 
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
          
        
      );
  
      $(document).ready(function()
        % block domready %
        % endblock %
      );
    </script>

【参考方案1】：

在您当前的 jquery 代码中，您的目标是所有类，即：$('span.count .total') 这将获得所有类值，这就是您看到随机数的原因。相反，您可以使用selector.closest(".image-info").find(.. 仅定位计数范围，其中a 标签已被点击，$('a.like') 使用$(this)。

演示代码：

$('a.like').click(function(e) 
  var selector = $(this) //use this
  e.preventDefault();
  /*$.post('% url "images:like" %', 
      id: $(this).data('id'),
      action: $(this).data('action')
    ,
    function(data) 
      if (data['status'] == 'ok') */
  var previous_action = selector.data('action');
  selector.text(previous_action == 'like' ? 'Unlike' :
    'Like');
  //update action of only a tag which is been clicked
  selector.data('action', previous_action == 'like' ?
    'unlike' : 'like');

  //get span total
  var previous_likes = parseInt(selector.closest(".image-info").find('span.count .total').text());
  selector.closest(".image-info").find('span.count .total').text(previous_action == 'like' ?
    previous_likes + 1 : previous_likes - 1);
  /* 
    
  );*/
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-info">
  <div>
    <span class="count">
          <span class="total">55</span> likes
    </span>
    <span class="count">
         87 view
        </span>
    <a href="#" data-id="1" data-action="like" class="like button">
            Like
        </a>
  </div>
  Somethings ..
</div>
<div class="image-info">
  <div>
    <span class="count">
          <span class="total">5</span> likes
    </span>
    <span class="count">
         82 view
        </span>
    <a href="#" data-id="2" data-action="unlike" class="like button">
            Unlike
        </a>
  </div>
  Somethings ..
</div>