How to use ajax to submit comments and automatically refresh them-JS Tutorial-php.cn

How to use ajax to submit comments and automatically refresh them

php中世界最好的语言

Release： 2018-03-31 15:29:36

Original

2885 people have browsed it

This time I will show you how to use ajax to submit comments and automatically refresh them. What are the precautions for using ajax to submit comments and automatically refresh them. The following is a practical case, let's take a look.

After trying many times, I finally got it, let’s code it. (I use jQuery's ajax, not native)

js code:

<script>
 $(document).ready(function () {
  getcomment();
  $('.comment-box button').click(function () {
   var comment_text = $('.comment-box textarea').val();
   $.ajax({
    type: 'POST',
    url: '/bbs/article/{{ article_list.id }}/comment/',
    data: {comment: comment_text},
    success:function (callback) {
     var data = $.parseJSON(callback);
     $('.callback').html(data.result);
     if(data.result === 'successfully') {
      getcomment();
     }
    }
   })
  });
 });
 function getcomment() {
  $.ajax({
   type: 'GET',
   url: '/bbs/article/{{ article_list.id }}/get_comment/',
   success:function (call) {
    var datas = $.parseJSON(call);
    $('.comment-list').html(datas.answer);
   }
  })
 }
</script>

Copy after login

Call the getcomment() function after the full text is loaded, get the comments from the database, and submit the comments written by yourself Then call the getcomment() function again to automatically refresh the

html template (the bootstrap template is used):

 <p class="row">
   <p class="comment-list" style="margin-left: 10px">
   </p>
  </p>
  <p class="row">
 <article class="col-xs-12">
     <h4>请评论：</h4>
     <p class="comment-box">
      <textarea class="form-control" rows="3"></textarea>
      <span class="callback"></span><button type="submit" class="btn btn-success pull-right" style="max-width: 5px;">评论</button>
     </p>
 </article>
</p>
  <hr>

Copy after login

View function:

@csrf_exempt
def comment(request,article_id):
 if request.method == 'POST':
  comments = request.POST['comment']
  if len(comments) < 5:
   result = u'评论数需大于5'
   return HttpResponse(json.dumps({'result': result}))
  else:
   result = 'successfully'
   Comment.objects.create(content= comments, article_id=article_id)
   return HttpResponse(json.dumps({'result': result}))

Copy after login

This It is the function to submit comments. Don’t forget to add the csrf decorator

def get_comment(request, article_id):
 article_list = get_object_or_404(Article, id=article_id)
 comments = article_list.comment_set.all()
 html = ''
 for i in comments:
  ele = '<p class="row"><article class="col-xs-12"><p class="pull-right"><span class="label label-default">作者:' + 'i.user' + '</span></p><p>' + i.content + '<ul class="list-inline"><li><a href="#" rel="external nofollow" ></a></li></ul></article></p><hr>'
  html += ele
 return HttpResponse(json.dumps({'answer': html}))

Copy after login

The function to get comments in the background.

Finally clear the value of textarea:

function resettext() {
 $('.form-control').val('');
}

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!