怎么用ajax实现提交评论并自动刷新

来源：动视网责编：小采时间：2020-11-27 19:57:19

怎么用ajax实现提交评论并自动刷新

怎么用ajax实现提交评论并自动刷新:这次给大家带来怎么用ajax实现提交评论并自动刷新，用ajax实现提交评论并自动刷新的注意事项有哪些，下面就是实战案例，一起来看一下。在试了很多次了，终于搞定了，上代码吧。（我用的是jQuery的ajax，不是原生的）js代码：<script> $(do

推荐度：

点击下载本文 文档为doc格式

导读怎么用ajax实现提交评论并自动刷新:这次给大家带来怎么用ajax实现提交评论并自动刷新，用ajax实现提交评论并自动刷新的注意事项有哪些，下面就是实战案例，一起来看一下。在试了很多次了，终于搞定了，上代码吧。（我用的是jQuery的ajax，不是原生的）js代码：<script> $(do

这次给大家带来怎么用ajax实现提交评论并自动刷新，用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模板）：

 <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('');
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

怎么用ajax实现提交评论并自动刷新

推荐度：

点击下载本文 文档为doc格式

标签：实现 ajax jQuery

热门焦点

怎么用ajax实现提交评论并自动刷新

怎么用ajax实现提交评论并自动刷新

怎么用ajax实现提交评论并自动刷新

最新推荐

猜你喜欢

热门推荐