Django使用模板进行动态局部刷新

想学习python，但是找不到方向，最近想突然对web编程感兴趣了，所有一直在看，刚刚对着教程做了一点东西。

 

使用Django提交评论时，如果使用Form提交评论信息，那么提交成功后，最好是能把刚刚输入的评论信息显示出来；

所以提交评论信息后，最好能马上将评论内容显示出来。

当时考虑了3种方法：

1、最开始考虑使用Ajax+json，从服务器读取最新的一条评论信息，当多个用户同时提交评论的时候，这种办法会出现不同步的现象，pass掉；

2、还是使用Ajax+json，客户端传递当前页面的评论数量，服务端将客户端未显示的评论全部返回，在ajax的回调函数中加载这些评论；

3、客户端通过ajax向服务器取评论信息，服务器使用模板将评论内容全部渲染为html文本内容，并将内容返回到客户端，客户端将收到的HTML文本插入DIV中。

在方法1和2中，需要在JS代码中解析JSON数据并根据JSON数据生成HTML内容，使用方法3可以使用模板统一处理；相对于处理JSON数据和渲染模板，方法3会加重服务器负担。

 

下面是代码：

评论的mudel

class BlogContent(models.Model):
    blog = models.ForeignKey(Blog)
    auth = models.CharField('昵称', max_length=40)
    contents = models.TextField('内容',max_length=2000)
    time = models.TimeField(auto_now_add=True)
    date = models.DateField(auto_now_add=True)

客户端Form表单

{# 下面是评论输入区域 #}
    <div id="blogComment">
        <form id="user_content">
            <div>昵称 <input type="text" id="username" value="匿名"><p/></div>
            <textarea id="content_value"></textarea><p/>
            <input type="text" id="blog_id" value="{{ item.id }}" style="display:none;"/>
            <input type="submit" id="content_submit" value="提交评论"/>
        </form>
    </div>

提交评论的JS代码

 $(function() {
        $("#user_content").submit(function(){
            var username = $("#username").val();
            var content_value = $("#content_value").val();
            var blog_id = $("#blog_id").val()
            $(this).ajaxSubmit({
                type:"post",  //提交方式
                dataType:"text", //数据类型
                url:"/content/", //请求url
                data: {
                'username': username,
                'content_value': content_value,
                'blog_id':blog_id
                },
                success:function(data){ //提交成功的回调函数
                    loadNewContents()
                    $("#content_value").val("");
                }
            });
            return false; //不刷新页面
        });
    });

从服务器读取全部评论信息并进行显示的JS代码

 //加载最新的评论
    function loadNewContents()
    {
        var lstContent = $("#lstContents");
        //lstContent.html("");

        var blog_id = $("#blog_id").val()
        $(this).ajaxSubmit({
            type: "post",  //提交方式
            dataType: "text", //数据类型
            url: "/allcontent/", //请求url
            data: {
                'blog_id': blog_id
            },
            success: function (data) { //提交成功的回调函数
                if(data.length >0)
                {
                     $("#lstContents").html(data);

                }
            }
        });
    }

Django的模板

{% for item in list_contents %}
    <div class="content">
        <div class="content_info">#{{  forloop.counter }}楼 {{ item.auth }} 发表于 {{ item.date }} {{ item.time }}<p/></div>
        <div class="content_value">{{ item.contents }}</div>
        <div class="content_option"><a href="#">回复</a><a href="#">引用 </a></div>
    </div>
{% endfor %}

Django的views

@csrf_exempt
def get_blog_all_contents(request):
    response = HttpResponse()
    response['Content-Type'] = "text/json"
    strId = request.POST.get("blog_id", '')
    if strId:
        try:
            blog_id = int(strId)
            item = Blog.objects.get(id=blog_id)
            list_contents = item.blogcontent_set.order_by('date', 'time')
            return render_to_response("blogContentList.html", locals())
        except Exception, e:
            print(e)
    return ""