如何使用Ajax更新评论计数 [英] How do i update comment count using Ajax

问题描述

我正在Django中进行项目开发，用户可以在其中发表评论.当帖子上的用户评论将计数增加到1时，我如何更新每个帖子的评论计数.我尝试将id添加到div，但是什么也没有发生.我该如何实施?

i am working on a project in Django where users can comment on a post. How do i update the comment count of each post, when user comment on a post increases the count to 1. I tried adding the id to div's but nothing happened. How do i implement this?

主页模板:

<!-- Comment count post is an object of all post in homepage -->
<div class="col-4 col-md-4 col-lg-4" id="newfeeds-form">
<a href="{% url 'site:comments' post.id %}" class="home-comment-icon z-depth-0">
<img src="{{ '/static/' }}images/comment.png" width="19" height="19" alt="comment-icon">
{% if post.comments.all|length > 999 %}
<span class="font-weight-bold dark-grey-text" id="number-of-comments">
{{ post.comments.count|floatformat }}
</span>
{% else %}
<span class="font-weight-bold dark-grey-text" id="number-of-comments">
{{ post.comments.count }} Comment{{ post.comments.count|pluralize }}
</span>
{% endif %}
</a>
</div>

<!-- New Feeds Comment Form -->
<div id="newfeeds-form">
{% include 'ajax_newfeeds_comments.html' %} 
</div>

Ajax提交评论:

$(document).ready(function() {

$('.feeds-form').on('submit', onSubmitFeedsForm);
$('.feeds-form .textinput').on({
'keyup': onKeyUpTextInput,
'change': onKeyUpTextInput // if another jquery code changes the value of the input
});

function onKeyUpTextInput(event) {
var textInput = $(event.target);
textInput.parent().find('.submit').attr('disabled', textInput.val() == '');
}

function onSubmitFeedsForm(event) {
event.preventDefault();

// if you need to use elements more than once try to keep it in variables
var form = $(event.target);
var textInput = form.find('.textinput');
var hiddenField = form.find('input[name="post_comment"]');

$.ajax({
  type: 'POST',
  url: "{% url 'site:home' %}",
  // use the variable of the "form" here
  data: form.serialize(),
  dataType: 'json',
  beforeSend: function() {
    // beforeSend will be executed before the request is sent
    form.find('.submit').attr('disabled', true);
  },
  success: function(response) {
    // as a hint: since you get a json formatted response you should better us "response.form" instead of response['form']
    $('#newfeeds-form' + hiddenField.val()).html(response.form);
    // do you really want to reset all textarea on the whole page? $('textarea').val('');
    textInput.val(''); // this will trigger the "change" event automatically
  },
  error: function(rs, e) {
    console.log(rs.resopnseText);
  },
  complete: function() {
    // this will be executed after "success" and "error"
    // depending on what you want to do, you can use this in the "error" function instead of here
    // because the "success" function will trigger the "change" event automatically
    textInput.trigger('change');
  }
});
}

});

推荐答案

如果您确定每次请求都会创建一个新注释，则可以通过增加所需html元素的计数来做到这一点.

If you are sure that a new comment will be created with each request, than you can do it with incrementing the count on your desired html element.

到目前为止，我尚未使用python或django，但已尝试优化代码.

I have not worked with python or django so far, but have tried to optimize the code.

<!-- ... -->
<div class="col-4 col-md-4 col-lg-4" id="newfeeds-form">
    <span class="font-weight-bold dark-grey-text" id="number-of-comments" data-number="{{ post.comments.count }}">
      {% if post.comments.count > 999 %}
        {{ post.comments.count|div:1000|floatformat:1 }}k Comments
      {% else %}
        {{ post.comments.count }} Comment{{ post.comments.count|pluralize }}
      {% endif %}
    </span>
</div>
<!-- ... -->

function onSubmitFeedsForm(event) {
  // ...
  $.ajax({
    // ...
    success: function(response) {
      $('#newfeeds-form' + hiddenField.val()).html(response.form);
      textInput.val('');

      // how you can increment the value of the amount of comments
      refreshNumberOfComments();
    },
    // ...
  });
  // ...
}
// ...

function refreshNumberOfComments() {
  var numberOfCommentsElement = $('#number-of-comments');
  var numberOfComments = parseInt(numberOfCommentsElement.data('number')) + 1;

  numberOfCommentsElement.data('number', numberOfComments);

  if (numberOfComments == 1) {
    numberOfCommentsElement.text(numberOfComments + ' Comment');
  } else if (numberOfComments > 999) {
    numberOfCommentsElement.text((numberOfComments / 1000).toFixed(1) + 'k Comments');
  } else {
    numberOfCommentsElement.text(numberOfComments + ' Comments');
  }
}

另一个选择是为请求提供有关注释数量的信息. 因此，您可以像下面的示例一样在jQuery中实现

Another option is to give the request the information about the amount of comments. So you could make it in jQuery like this example

$.ajax({
  // ...
  success: function(response) {]
    $('#newfeeds-form' + hiddenField.val()).html(response.form);
    textInput.val('');

    // your server side script should implement a new field "number_of_comments"
    refreshNumberOfComments(response.number_of_comments); // for this call the function above has to get a parameter
  },
  // ...
});

这篇关于如何使用Ajax更新评论计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！