在試了很多次了,終于搞定了,上代碼吧。(我用的是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>
在全文加載后調(diào)用getcomment()函數(shù),從數(shù)據(jù)庫(kù)中獲取評(píng)論,自己寫(xiě)的評(píng)論提交后再次調(diào)用getcomment()函數(shù),自動(dòng)刷新
html模板(用到是bootstrap模板):
<div class="row"> <div class="comment-list" style="margin-left: 10px"> </div> </div> <div class="row"> <article class="col-xs-12"> <h4>請(qǐng)?jiān)u論:</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;">評(píng)論</button> </div> </article> </div> <hr>
視圖函數(shù):
@csrf_exempt def comment(request,article_id): if request.method == 'POST': comments = request.POST['comment'] if len(comments) < 5: result = u'評(píng)論數(shù)需大于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}))
這是提交評(píng)論的函數(shù),別忘記添加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}))
后臺(tái)獲取評(píng)論的函數(shù)。
最后將textarea的值清空:
function resettext() { $('.form-control').val(''); }
以上所述是小編給大家介紹的django ajax提交評(píng)論并自動(dòng)刷新功能的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com