在试了很多次了，终于搞定了，上代码吧。（我用的是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模板）：
<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'评论数需大于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 = '<p 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></p><hr>' html += ele return httpresponse(json.dumps({'answer': html}))
后台获取评论的函数。
最后将textarea的值清空：
function resettext() { $('.form-control').val(''); }
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
ajax请求地址后加随机数防止浏览器缓存的原因
js清除ie浏览器缓存的方法
解决浏览器记住ajax请求并能前进和后退问题
以上就是django ajax提交评论并自动刷新功能的实现代码的详细内容。