Django中使用jQuery做评论的无刷新提交

评论如果简单用表单来提交的话，每次做评论都得刷新页面。这样评论完又得重头翻才能找到自己的评论，效果非常不好，于是打算用jQuery来做评论的无刷新提交。实际上就是利用AJAX，将评论数据传到服务器，由服务器将处理后，将数据返回给浏览器，然后修改HTML代码，将评论显示出来。

Django中使用jQuery的AJAX操作，还可以参考这里。

这是我的HTML代码

<div>
    <span style="float:left;margin-top:10px;">
        <textarea name="content" rows="7" id="commentContent" style="550px;height:auto"  value=""></textarea>
    </span>
    <span style="clear:both;float:left;margin-top:10px;">
        <input type="submit" name="addComment" value="加上去" id="addComment"  style="font-size:12px;font-weight:bold;" title="加上去">
    </span>
</div>

这是我的javascript代码

<script type="text/javascript" src="/static/js/jquery.min.js"></script>

<script type="text/javascript"> 
$(document).ready(function()
{
　　$("#addComment").click(function(event)
　　{
        add_comment();
    });
    
    function add_comment()
    {
        $.post("add_comment/",   //请求的url是“当前页面/add_comment/"
        {
            content:$("#commentContent").val(),
        },
        function(data)
        {
        　　if(data.status=="success")
        　　{
                $("#commentContent").val("");
                $("#comment-list").append(data.html);//追加html片段
        　　}
        　　else
        　　{
                alert(data.status);//提交失败，弹出提示。
        　　}
        },
        "json"
    );}
});
</script>

 

在urls.py中添加对AJAX请求url的处理函数的映射

urlpatterns += patterns('',
    (r'^photos/(?P<user_id>\d*)/(?P<photo_id>\d*)/add_comment/$', 'views.ajax_addComment'),
　　 #我这里是对照片进行评论
)

在views中添加处理函数

@csrf_exempt #若没有csrf处理，服务器会返回403 forbidden错误
def ajax_addComment(request, user_id, photo_id):
    if not request.is_ajax() or (request.method != 'POST'):
        return HttpResponse(json.dumps({"status":'error0'}))
         
    #只有登录用户，才可以操作
    if not request.user.is_authenticated():
        return HttpResponse(json.dumps({"status":'error1'}))
    
    try:
        content = (request.POST.get('content')).strip()
        if content != '':
            comment = Comment(photo_id=photo_id,author=request.user,content=content)
            comment.save()#保存评论数据到数据库中

            t = get_template('comment_item.html')
            html = t.render(Context({'comment':comment}))#对评论数据用comment_item.html这个模板进行渲染
　　except: 
        return HttpResponse(json.dumps({'status': str(sys.exc_info()[0]) + str(sys.exc_info()[1])}))#返回异常信息，调试的时候可以用
    
    return HttpResponse(json.dumps({'status':'success','html':html}))

上面使用了session和CSRF中间件，需要在settings.py中的MIDDLEWARE_CLASSES，添加下面的代码。

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.middleware.csrf.CsrfResponseMiddleware',
)

 

还是用了django中的user授权app，需要在settings.py中的INSTALLED_APPS，添加下面的代码。

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.sessions',
)

 

这是评论项的模板comment_item.html，里面的class是排版的需要，请自定义。

<div class="comment-item" id="c_{{comment.id}}">
　　<div class="fleft">
　　　　<img title="{{comment.author.name}}" src="{{comment.author.avatar_src}}">
　　</div>

　　<div class="comment-text-wrapper">
    <div class="comment-head">
    　　<span>{{comment.date_posted}}</span>
    　　<span class="blue-link" style="margin-left:10px;">{{comment.author.name}}</span>
    </div>
    <div class="comment-text">
    　　<span>{{comment.content}}</span>
    </div>
　　</div>
</div>