django ajax提交评论并自动刷新功能的实现代码-巨人网络通讯

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

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>

在全文加载后调用getcomment（）函数，从数据库中获取评论，自己写的评论提交后再次调用getcomment（）函数，自动刷新

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

 div class="row">
   div class="comment-list" style="margin-left: 10px">
   /div>
  /div>
  div class="row">
 article class="col-xs-12">
     h4>请评论：/h4>
     div 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>
     /div>
 /article>
/div>
  hr>

视图函数：

@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}))

这是提交评论的函数，别忘记添加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}))

后台获取评论的函数。

最后将textarea的值清空：

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

以上所述是小编给大家介绍的django ajax提交评论并自动刷新功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Python的Django应用程序解决AJAX跨域访问问题的方法
使用Python的Django框架结合jQuery实现AJAX购物车页面
django使用ajax post数据出现403错误如何解决
django中使用jquery ajax post数据出现403错误的解决办法(两种方法)
Django框架如何使用ajax的post方法
django通过ajax发起请求返回JSON格式数据的方法

全 部 栏 目

全部栏目