Django使用Ajax实现页面无刷新评论回复功能

Posted 2020-06-13

虽然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_exempt
def 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语句写在一个指定的位置，就实现了页面无刷新提交。

整个过程就是这样的。

 

转自：http://www.mamicode.com/info-detail-473954.html