django如何實(shí)現(xiàn)ajax提交評(píng)論并自動(dòng)刷新功能

這篇文章將為大家詳細(xì)講解有關(guān)django如何實(shí)現(xiàn)ajax提交評(píng)論并自動(dòng)刷新功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

js代碼：

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

在全文加載后調(diào)用getcomment（）函數(shù)，從數(shù)據(jù)庫中獲取評(píng)論，自己寫的評(píng)論提交后再次調(diào)用getcomment（）函數(shù)，自動(dòng)刷新

html模板（用到是bootstrap模板）：

 <div class="row">
   <div class="comment-list" >
   </div>
  </div>
  <div class="row">
 <article class="col-xs-12">
     <h5>請(qǐng)?jiān)u論：</h5>
     <div class="comment-box">
      <textarea class="form-control" rows="3"></textarea>
      <span class="callback"></span><button type="submit" class="btn btn-success pull-right" >評(píng)論</button>
     </div>
 </article>
</div>
  <hr>

視圖函數(shù)：

@csrf_exempt
def comment(request,article_id):
 if request.method == 'POST':
  comments = request.POST['comment']
  if len(comments) < 5:
   result = u'評(píng)論數(shù)需大于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}))

這是提交評(píng)論的函數(shù)，別忘記添加csrf裝飾器

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 = '<div 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></div><hr>'
  html += ele
 return HttpResponse(json.dumps({'answer': html}))

后臺(tái)獲取評(píng)論的函數(shù)。

最后將textarea的值清空：

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

關(guān)于“django如何實(shí)現(xiàn)ajax提交評(píng)論并自動(dòng)刷新功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。