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

虽然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

Django使用Ajax实现页面无刷新评论回复功能的相关文章

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

Django使用Ajax实现页面无刷新评论回复功能 http://www.cnblogs.com/mfc-itblog/p/5188900.html js界面刷新 http://www.cnblogs.com/dingdingo/archive/2011/10/26/2225307.html js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新

AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比如script标签的src以及图片的src,css背景图片,等等. 案例1:通过HTTP状态码204实现页面无刷新 下面来一个小案例,实现一个页面无刷新的投票功能. html: <div id="box"> <h1>周杰伦</h1> <p>0

2017-6-6 Ajax版页面无刷新三级联动

实现效果: 页面代码: <div> <select id="sel1" style="width:100px;"> </select> <select id="sel2" style="width:100px;"> </select> <select id="sel3" style="width:100px;"> &

php结合ajax实现简单的无刷新评论

实现的原理其实很简单,我是用的原生js写的,当然用jq封转好的也都一样(下次用jq写个其他的).解析都写在代码里面了: 建表语句: 1 CREATE TABLE `comment` ( 2 `id` int NOT NULL AUTO_INCREMENT COMMENT '主键索引' , 3 `content` text NOT NULL COMMENT '评论内容' , 4 PRIMARY KEY (`id`) 5 )ENGINE=MYISAM DEFAULT CHARSET=UTF8 6 ;

基于jQuery的ajax系列之用FormData实现页面无刷新上传

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册(POST方式)

1.jsp代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

学习aiax(javascript)--页面无刷新更新ajax更新时间

1.JSP代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif&quo

Asp.net页面无刷新请求实现

Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="omAjaxSubmit.aspx.cs" Inherits="OMDemo.demo.omAjaxSubmit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q