django ajax提交评论并自动刷新功能的实现代码

网络编程 2021-07-05 10:37www.168986.cn编程入门
这篇文章主要介绍了django ajax提交评论并自动刷新功能的实现代码,需要的朋友可以参考下

在试了很多次了,终于搞定了,上代码吧。(我用的是jQuery的ajax,不是原生的)

js代码

<script>
 $(document).ready(function () {
  getment();
  $('.ment-box button').click(function () {
   var ment_text = $('.ment-box textarea').val();
   $.ajax({
    type: 'POST',
    url: '/bbs/article/{{ article_list.id }}/ment/',
    data: {ment: ment_text},
    suess:function (callback) {
     var data = $.parseJSON(callback);
     $('.callback').html(data.result);
     if(data.result === 'suessfully') {
      getment();
     }
    }
   })
  });
 });
 function getment() {
  $.ajax({
   type: 'GET',
   url: '/bbs/article/{{ article_list.id }}/get_ment/',
   suess:function (call) {
    var datas = $.parseJSON(call);
    $('.ment-list').html(datas.answer);
   }
  })
 }
</script>

在全文加载后调用getment()函数,从数据库中获取评论,自己写的评论提交后调用getment()函数,自动刷新

html模板(用到是bootstrap模板)

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

视图函数

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

这是提交评论的函数,别忘记添加csrf装饰器

def get_ment(request, article_id):
 article_list = get_object_or_404(Article, id=article_id)
 ments = article_list.ment_set.all()
 html = ''
 for i in ments:
  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}))

后台获取评论的函数。

将textarea的值清空

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

以上所述是长沙网络推广给大家介绍的django ajax提交评论并自动刷新功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by