Django3 Like Ajax Button Book By Antonio Mele

Question

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

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

Ajax：

{% 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>

Answer 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>