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
1class 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 }}" />
<input type="submit" id="content_submit" value="提交评论"/>
</form>
</div>
提交评论的JS代码
1  $(function() {
2        $("#user_content").submit(function(){
3var username = $("#username").val();
4var content_value = $("#content_value").val();
5var 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            });
20return false; //不刷新页⾯
21        });
22    });
从服务器读取全部评论信息并进⾏显⽰的JS代码
1//加载最新的评论
2function loadNewContents()
3    {
4var lstContent = $("#lstContents");
5//lstContent.html("");
6
7var 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) { //提交成功的回调函数
16if(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">#{{  unter }}楼 {{ item.auth }} 发表于 {{ item.date }} {{ item.time }}<p/></div> 4<div class="content_value">{{ ts }}</div>
5<div class="content_option"><a href="#">回复</a><a href="#">引⽤</a></div>
6</div>
7 {% endfor %}
Django的views
1 @csrf_exempt
2def get_blog_all_contents(request):
3    response = HttpResponse()
4    response['Content-Type'] = "text/json"
5    strId = ("blog_id", '')
6if strId:
7try:
8            blog_id = int(strId)
9            item = (id=blog_id)
10            list_contents = item.der_by('date', 'time')
11return render_to_response("blogContentList.html", locals())
12except Exception, e:
13print(e)
14return""

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。