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提交评论并自动刷新功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-06-03

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;

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:

使用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的post方法

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

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

JSONP跨域GET请求解决Ajax跨域访问问题

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

浅析JSONP解决Ajax跨域访问问题的思路详解

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

详解Django解决ajax跨域访问问题

这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料,文中介绍的实现方法包括:使用django-cors-headers全局控制.使用JsonP,只能用于Get方法以及在views.py里设置响应头,只能控制单个接口,需要的朋友可以参考下. 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: 但是,Chrome浏览器提示错误: No 'Access-Control-Allow-Origin' header is present on the

express如何解决ajax跨域访问session失效问题详解

前言 最近在学习express,就用以前做的项目来进行express前后端分离的练手了,在做登陆注册的时候发现跨域的时候,session的值是会失效的,导致session里面的数据获取为undefined,网上找资料加上自己的不断尝试,终于找到了解决方法,简单记录一下解决方法. 解决方法 1.客户端因为session原则上是需要cookie支持的,所以Ajax方法里面必须添加 xhrFields:{withCredentials:true},表示允许带Cookie的跨域Ajax请求( 特别说明,

完美解决ajax跨域请求下parsererror的错误

ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLHttpRequest.status=200  (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parseerror的错误. 出现这个错误,大都是不良书写习惯,或者语法不当造成的. 关于ajax的错误,请使用: error:function(XMLHttpRequest, textStatus, errorThro

ajax跨域访问报错501的解决方法

问题:ajax跨域访问报错501 运行下面的代码会报错501 $.ajax({ type: "POST", url: "http://192.168.1.202/sensordata.php", contentType:'application/json; charset=utf-8', data: JSON.stringify(ajaxPostData), dataType:'json', success: function(data){ //On ajax su

深入浅析Jsonp解决ajax跨域问题

一.介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力问题吧,自己经过很多尝试,所以总结了一下,终究还是弄懂了皮毛.注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax. 1.同源策略 浏览器有一个很重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(JavaS

解决ajax跨域请求数据cookie丢失问题

前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: {             withCredentials: true         },         crossDomain: true, $.ajax({         type: postType,         url: url,         data: postData || '',         xhrFields: {             withCredentials: tru

Ajax跨域访问Cookie丢失问题的解决方法

ajax跨域访问,可以使用jsonp方法或设置Access-Control-Allow-Origin实现,关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的文章<ajax 设置Access-Control-Allow-Origin实现跨域访问> 1.ajax跨域访问,cookie丢失 首先创建两个测试域名 a.fdipzone.com 作为客户端域名 b.fdipzone.com 作为服务端域名 测试代码 setcookie.PHP 用于设置服务端co