怎么用ajax实现提交评论并自动刷新

这次给大家带来怎么用ajax实现提交评论并自动刷新,用ajax实现提交评论并自动刷新的注意事项有哪些,下面就是实战案例,一起来看一下。

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

js代码:

 $(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);   }  }) }

登录后复制

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

html模板(用到是bootstrap模板):

 

请评论:


登录后复制

视图函数:

@csrf_exemptdef 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 = '

作者:' + 'i.user' + '

' + i.content + '


' html += ele return HttpResponse(json.dumps({'answer': html}))

登录后复制

后台获取评论的函数。

最后将textarea的值清空:

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

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Ajax+PHP制作购物车的详细教程

如何实现AJAX的分页效果

以上就是怎么用ajax实现提交评论并自动刷新的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2776898.html

(0)
上一篇 2025年3月8日 14:57:57
下一篇 2025年3月8日 14:58:03

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Django Ajax如何使用

    这次给大家带来Django Ajax如何使用,使用Django Ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 简介: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript …

    2025年3月8日 编程技术
    200
  • js请求servlet实现ajax请求的步骤详解

    这次给大家带来js请求servlet实现ajax请求的步骤详解,js请求servlet实现ajax请求的注意事项有哪些,下面就是实战案例,一起来看一下。 ajax请求是一种无刷新式的用户体验,可以发送GET和POST两种异步请求,现记录如下…

    2025年3月8日
    200
  • ajax提交到java后怎么处理数据

    这次给大家带来ajax提交到java后怎么处理数据,ajax提交到java后处理数据的注意事项有哪些,下面就是实战案例,一起来看一下。 环境:eclipse+struts 要实现的效果:点击按钮提交数据到后台之后回到前台显示出来数据 ind…

    编程技术 2025年3月8日
    200
  • ajax数据处理步骤详解(附代码)

    这次给大家带来ajax数据处理步骤详解(附代码),ajax数据处理的注意事项有哪些,下面就是实战案例,一起来看一下。 需要注意的是,调用的封装的数据库,和jQuery的保存地址 一、注册 (1)写文本框来进行用户名的验证 //这个使用来显示…

    2025年3月8日 编程技术
    200
  • ajax实现分页查询功能

    这次给大家带来ajax实现分页查询功能,ajax实现分页查询功能的注意事项有哪些,下面就是实战案例,一起来看一下。 ajax分页查询功能的具体代码,供大家参考,具体内容如下 显示的效果如下: 实现效果的代码如下: 1.fenye.php 无…

    2025年3月8日
    200
  • ajax实现加载数据的步骤详解

    这次给大家带来ajax实现加载数据的步骤详解,ajax实现加载数据的注意事项有哪些,下面就是实战案例,一起来看一下。 加载数据的具体代码,供大家参考,具体内容如下 1.xssj.php 无标题文档显示数据$(document).ready(…

    2025年3月8日
    200
  • ajax的三级联动菜单栏如何实现

    这次给大家带来ajax的三级联动菜单栏如何实现,ajax三级联动菜单栏实现的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例为大家分享了ajax三级联动展示的具体代码,供大家参考,具体内容如下 1. test.php 无标题文档三…

    2025年3月8日
    200
  • js结合json实现ajax的实战案例

    这次给大家带来js结合json实现ajax的实战案例,js结合json实现ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 前期准备 1、安装wampserver或者其他相似软件来搭建本地集成安装环境,我安装的是phpstudy …

    2025年3月8日
    200
  • H5开发时使用Ajax上传Base64格式图片

    这次给大家带来H5开发时使用Ajax上传Base64格式图片,H5开发时使用Ajax上传Base64格式图片的注意事项有哪些,下面就是实战案例,一起来看一下。 废话不多说,直接看代码吧 1、上传组件 登录后复制 2、展示添加上的图片 vie…

    编程技术 2025年3月8日
    200
  • 基于Ajax的formData图片和数据上传rue实现

    这次给大家带来基于Ajax的formData图片和数据上传rue实现,基于Ajax的formData图片和数据上传注意事项有哪些,下面就是实战案例,一起来看一下。 最近做一个项目,关于用户数据和表单上传的项目,碰到了不少坑,这里总结的分享给…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论