您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 10:52:04
  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_exemptdef 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提交评论并自动刷新功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对51zixue.net网站的支持!


下载地址:
Django Ajax的使用教程
配置Chrome支持本地(file协议)的AJAX请求
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。