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

1 class BlogContent(models.Model):

2     blog = models.ForeignKey(Blog)

3     auth = models.CharField('昵称', max_length=40)

4     contents = models.TextField('内容',max_length=2000)

5     time = models.TimeField(auto_now_add=True)

6     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代码

 1  $(function() {

 2         $("#user_content").submit(function(){

 3             var username = $("#username").val();

 4             var content_value = $("#content_value").val();

 5             var blog_id = $("#blog_id").val()

 6             $(this).ajaxSubmit({

 7                 type:"post",  //提交方式

 8                 dataType:"text", //数据类型

 9                 url:"/content/", //请求url

10                 data: {

11                 'username': username,

12                 'content_value': content_value,

13                 'blog_id':blog_id

14                 },

15                 success:function(data){ //提交成功的回调函数

16                     loadNewContents()

17                     $("#content_value").val("");

18                 }

19             });

20             return false; //不刷新页面

21         });

22     });

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

 1  //加载最新的评论

 2     function loadNewContents()

 3     {

 4         var lstContent = $("#lstContents");

 5         //lstContent.html("");

 6 

 7         var blog_id = $("#blog_id").val()

 8         $(this).ajaxSubmit({

 9             type: "post",  //提交方式

10             dataType: "text", //数据类型

11             url: "/allcontent/", //请求url

12             data: {

13                 'blog_id': blog_id

14             },

15             success: function (data) { //提交成功的回调函数

16                 if(data.length >0)

17                 {

18                      $("#lstContents").html(data);

19 

20                 }

21             }

22         });

23     }

Django的模板

1 {% for item in list_contents %}

2     <div class="content">

3         <div class="content_info">#{{  forloop.counter }}楼 {{ item.auth }} 发表于 {{ item.date }} {{ item.time }}<p/></div>

4         <div class="content_value">{{ item.contents }}</div>

5         <div class="content_option"><a href="#">回复</a><a href="#">引用 </a></div>

6     </div>

7 {% endfor %}

Django的views

 1 @csrf_exempt

 2 def get_blog_all_contents(request):

 3     response = HttpResponse()

 4     response['Content-Type'] = "text/json"

 5     strId = request.POST.get("blog_id", '')

 6     if strId:

 7         try:

 8             blog_id = int(strId)

 9             item = Blog.objects.get(id=blog_id)

10             list_contents = item.blogcontent_set.order_by('date', 'time')

11             return render_to_response("blogContentList.html", locals())

12         except Exception, e:

13             print(e)

14     return ""