虽然Django本身自带Form可以提交表单,但在Django中结合Jquery使用Ajax,可以让Django开发的应用发挥更好的用户体验,同时可以降低服务器的负担。普通提交表单方式需要刷新整个页面才可以将评论显示出来,而使用Ajax提交评论之后,可以在页面无刷新的情况下显示出来。
首先是model:
class Replay(models.Model): content = models.TextField() post = models.ForeignKey(Post) replay_time = models.DateTimeField(u‘回复时间‘,editable=False) replay_user = models.CharField(max_length=30,editable=True) def __unicode__(self): return self.replay_time
客服端Form表单:
<form id="user_content" method = ‘post‘ enctype="multipart/form-data"> <textarea cols="40" id="id_content" name="content" rows="10"></textarea> <input id=‘put‘ type="submit" value = "提交" /></form>
表单很简单,只列出了核心代码。
关键部分,提交评论的JS代码:
<script> $(function() { $("#user_content").submit(function(){ var content = $("#id_content").val(); $.ajax({ type:"post", dataType:"json", url:"/replays/{{post_id}}/", data: { ‘content‘: content, }, success: function(data){ $(‘#user_content‘)[0].reset(); var newcomment = "<li class=\"contents\">" + "<div class=\"name\">你:</div>"+ "<div class=\"neir\">"+"<p>"+data.content+"</p>"+"</div>"+ "<div class=\"geceng\"></div>"+ "<div class=\"time\">回复时间:刚刚</div>"+ "<div class=\"geceng\"></div>"+ "</li>" $(".con").append(newcomment); } }); return false; }); }); </script>
Django的模板:
<div id = "comm"> <ul class = ‘con‘> {% for replay in replays %} <div class=‘cont‘> <div class=‘contents‘> <div class=‘name‘> {%if replay.replay_user %} {{replay.replay_user}}:</br> {%else%} 匿名:</br> {%endif%}</div><div class=‘neir‘> <pre>{{ replay.content }}</pre></div><div class=‘time‘> 回复时间:{{replay.replay_time|date:"Y-m-d"}}</div></div></div> {% endfor %} </ul></div>
其中class = ’con’ 这个类,我的目的就是在这个类下面添append一个div,这个div里面的内容就是最新评论的内容。
Django的views;
@csrf_exemptdef replays(req,post_id): if req.is_ajax(): content = req.POST.get(‘content‘,None) if content: item=Post.objects.get(id=post_id) Replay.objects.create(content=content,post=item,replay_time=datetime.datetime.today(),replay_user= req.COOKIES.get(‘username‘,‘‘))#将评论写进数据库 return HttpResponse(json.dumps({"content":content})) else: form = ReplayForm() post_id=post_id replays = Post.objects.get(id=post_id).replay_set.all()#一条帖子的所有评论 num = int(len(replays)) title = Post.objects.get(id=post_id).title content = Post.objects.get(id=post_id).content username = req.COOKIES.get(‘username‘,‘‘) return render_to_response(‘replays.html‘,{ ‘content‘:content, ‘post_id‘:post_id, ‘num‘:num, ‘title‘:title, ‘replays‘:replays, ‘username‘:username, ‘form‘:form, },context_instance=RequestContext(req))
整个Ajax的流程是这样的:
1. 用户在Textarea里面输入内容,然后点击提交按钮,触发submit事件,触发return false,页面禁止刷新。
2. 之后获取Textarea里面的内容传给变量content。
3. 然后就是传送数据,在ajax函数里面定义传输的方式:post,数据类型:json,url(这里填写的url要对应到相应的views函数),data我这里面只有content。
4. ajax传送到服务器端,然后服务器端进行接收,这里replays函数将content存储在数据库中,然后返回一个HttpResponse响应,里面content作为json数据类型。
5. 这时ajax执行success:$(‘#user_content‘)[0].reset()是将表单内容清空,防止用户重复提交表单,我将回复的内容赋值给变量newcomment,这是一个html的语句,$(".con").append(newcomment):我将这个html语句写在一个指定的位置,就实现了页面无刷新提交。
整个过程就是这样的。
时间: 2024-10-25 20:57:34