django ajax提交評論並自動刷新功能的實現代碼

這篇文章主要介紹了django ajax提交評論並自動刷新功能的實現代碼,需要的朋友可以參考下

在試了很多次了，終於搞定了，上代碼吧。 （我用的是jQuery的ajax，不是原生的）

js程式碼：

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

在全文載入後呼叫getcomment（）函數，從資料庫中取得評論，自己寫的評論提交後來再呼叫getcomment（）函數，自動刷新

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

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

視圖函數：

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

這是提交評論的函數，別忘記加入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 = &#39;<p class="row"><article class="col-xs-12"><p class="pull-right"><span class="label label-default">作者:&#39; + &#39;i.user&#39; + &#39;</span></p><p>&#39; + i.content + &#39;<ul class="list-inline"><li><a href="#" rel="external nofollow" ></a></li></ul></article></p><hr>&#39;
  html += ele
 return HttpResponse(json.dumps({&#39;answer&#39;: html}))

後台取得評論的函數。

最後將textarea的值清空：

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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

ajax請求地址後面加上隨機數字防止瀏覽器快取的原因

JS清除IE瀏覽器快取的方法

解決瀏覽器記住ajax請求並能前進和後退問題

以上是django ajax提交評論並自動刷新功能的實現代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！