django ajax提交评论并自动刷新功能的实现代码

在试了很多次了，终于搞定了，上代码吧。（我用的是jQuery的ajax，不是原生的）

js代码：

<script>
 $(document).ready(function () {
  getcomment();
  $('.comment-box button').click(function () {
   var comment_text = $('.comment-box textarea').val();
   $.ajax({
    type: 'POST',
    url: '/bbs/article/{{ article_list.id }}/comment/',
    data: {comment: comment_text},
    success:function (callback) {
     var data = $.parseJSON(callback);
     $('.callback').html(data.result);
     if(data.result === 'successfully') {
      getcomment();
     }
    }
   })
  });
 });
 function getcomment() {
  $.ajax({
   type: 'GET',
   url: '/bbs/article/{{ article_list.id }}/get_comment/',
   success:function (call) {
    var datas = $.parseJSON(call);
    $('.comment-list').html(datas.answer);
   }
  })
 }
</script>

在全文加载后调用getcomment（）函数，从数据库中获取评论，自己写的评论提交后再次调用getcomment（）函数，自动刷新

html模板（用到是bootstrap模板）：

 <div class="row">
   <div class="comment-list" style="margin-left: 10px">
   </div>
  </div>
  <div class="row">
 <article class="col-xs-12">
     <h4>请评论：</h4>
     <div class="comment-box">
      <textarea class="form-control" rows="3"></textarea>
      <span class="callback"></span><button type="submit" class="btn btn-success pull-right" style="max-width: 5px;">评论</button>
     </div>
 </article>
</div>
  <hr>

视图函数：

@csrf_exempt
def comment(request,article_id):
 if request.method == 'POST':
  comments = request.POST['comment']
  if len(comments) < 5:
   result = u'评论数需大于5'
   return HttpResponse(json.dumps({'result': result}))
  else:
   result = 'successfully'
   Comment.objects.create(content= comments, article_id=article_id)
   return HttpResponse(json.dumps({'result': result}))

这是提交评论的函数，别忘记添加csrf装饰器

def get_comment(request, article_id):
 article_list = get_object_or_404(Article, id=article_id)
 comments = article_list.comment_set.all()
 html = ''
 for i in comments:
  ele = '<div class="row"><article class="col-xs-12"><p class="pull-right"><span class="label label-default">作者:' + 'i.user' + '</span></p><p>' + i.content + '<ul class="list-inline"><li><a href="#" rel="external nofollow" ></a></li></ul></article></div><hr>'
  html += ele
 return HttpResponse(json.dumps({'answer': html}))

后台获取评论的函数。

最后将textarea的值清空：

function resettext() {
 $('.form-control').val('');
}

以上所述是小编给大家介绍的django ajax提交评论并自动刷新功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 使用Python的Django框架结合jQuery实现AJAX购物车页面

    使用Python的Django框架结合jQuery实现AJAX购物车页面

    Django中集成jquery 首先,静态的资源通常放入static文件夹中: static/ css/ djquery.css samples/ hello.css js/ jquery-1.7.1.min.js samples/ hello.js 其中css和js都按照应用名称(这里是samples)划分文件夹,如果文件较多,还可以再划分子文件夹. Django通常使用模板来展现html,而且我们通常使用继承的模板,所以需要将共用的元素,比如全局的css,对jquery.js的引入等,写到b

  • django通过ajax发起请求返回JSON格式数据的方法

    本文实例讲述了django通过ajax发起请求返回JSON格式数据的方法.分享给大家供大家参考.具体实现方法如下: 这是后台处理的: def checkemail(request): user = None if request.POST.has_key('email'): useremail = request.POST['email'] result = {} user = User.objects.filter(useremail__iexact = useremail) if user:

  • Django框架如何使用ajax的post方法

    Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是CMS(内容管理系统)软件.并于2005年7月在BSD许可证下发布.这套框架是以比利时的吉普赛爵士吉他手Django Reinhardt来命名的. 今天在尝试调用jQuery的ajax时发现一个问题,就是使用GET方法服务器可以正常返回,但是使用POST方法却不行.后来再测试表单方式的POST的方法也

  • django使用ajax post数据出现403错误如何解决

    本文通过两种方法给大家介绍在django中,使用jquery ajax post数据,会出现403的错误,具体内容请看下文. 方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) {

  • django中使用jquery ajax post数据出现403错误的解决办法(两种方法)

    在django中,使用jquery ajax post数据,会出现403的错误 方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null;

  • Python的Django应用程序解决AJAX跨域访问问题的方法

    引子 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width

  • django ajax提交评论并自动刷新功能的实现代码

    在试了很多次了,终于搞定了,上代码吧.(我用的是jQuery的ajax,不是原生的) js代码: <script> $(document).ready(function () { getcomment(); $('.comment-box button').click(function () { var comment_text = $('.comment-box textarea').val(); $.ajax({ type: 'POST', url: '/bbs/article/{{ ar

  • Ajax提交表单页面刷新很快的解决方法

    注:使用ajax 提交表单时 type类型最好不用submit 用button合适 <form> <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3"> <input type="button" class="btn btn-info" value="重置" onclick="return resetaa()">

  • jQuery ajaxSubmit 实现ajax提交表单局部刷新

    AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

  • layui form表单提交后实现自动刷新

    刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪怕是button标签呢,也不行.我试了一下,使用这种情况的话,主要是在监听事件中并没有返回return false,如果返回了return false,这个就可以不再刷新. 2.提交表单,获取不到form表单中的数据. 有人说,是因为给了一个id,并没有给name属性,用惯了jquery.我懒得去找

  • spring cloud config和bus组件实现自动刷新功能

    spring cloud config和bus组件实现自动刷新功能

    1.启动RabbitMQ 2.修改config服务端 依赖:(boot和cloud版本不要太高,不然刷新配置的请求不能用) <dependencies> <!--consul--> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-consul-discovery</artifactId> &

  • easyui combobox开启搜索自动完成功能的实例代码

    combo.json [{ "id":-1, "text":" ", "spell":"" },{ "id":1, "text":"类型1", "spell":"lx1" },{ "id":2, "text":"类型2", "spell&q

  • 微信web端后退强制刷新功能的实现代码

    具体代码如下所示: <script> //生成uuid var uuidChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""); function uuid() { var r; var uuid = []; uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-"; uuid[14] =

  • python实现图书馆抢座(自动预约)功能的示例代码

    python实现图书馆抢座(自动预约)功能的示例代码

    脚本功能 系统开放座位时快速预约指定位置 可以设置预约的时间段 运行以后会一直帮你抢,需要手动停止 即使遇到更强的脚本自动帮抢下一个座位 实现 首先解决登录问题,通过F12找出登录请求包,分析对比一下包可以发现一般只有用户名和密码这个参数是变化的,然后用requests.session()的实例化去请求登录接口,登录成功. 然后预约座位抓一下包,分析包找到变化的关键的参数,一般情况下关键参数只有座位id.开始时间.结束时间,其他的参数一股脑照搬就行了,接下来用刚刚登录成功的那个requests.

  • Redis实现订单自动过期功能的示例代码

    前言 用户下单后,规定XX分钟后自动设置为"已过期",不能再发起支付.项目类似此类"过期"的需求,笔者提供一种使用Redis的解决思路,结合Redis的订阅.发布和键空间通知机制(Keyspace Notifications)进行实现. 配置redis.confg notify-keyspace-events选项默认是不启用,改为notify-keyspace-events "Ex".重启生效,索引位i的库,每当有过期的元素被删除时,向**key

  • 基于Ajax和forms组件实现注册功能的实例代码

    前端HTML <!DOCTYPE html> {% load static %} {% get_static_prefix as getstatic %} <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <

随机推荐