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 ""