<body style="padding: 15px;"><!-- 评论面板 --><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">发表评论</h3></div><form class="panel-body" id="formAddCmt"><div>评论人：</div><input type="text" class="form-control" name="username" autocomplete="off" /><div>评论内容：</div><textarea class="form-control" name="content"></textarea><button type="submit" class="btn btn-primary">发表评论</button></form></div><!-- 评论列表 --><ul class="list-group" id="cmt-list"><li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：</span><span class="badge" style="background-color: #5BC0DE;">评论人：</span>Item 1</li></ul></body>

注意：此处自行下载 bootstrap 文档进行引入

  <link rel="stylesheet" href="./lib/bootstrap.css" />

注意：此处自行下载 jQuery 进行引入

  <script src="./lib/jquery.js"></script>function getCommentList() {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/cmtlist',success: function (res) {if (res.status !== 200) return alert('获取评论列表失败！')var rows = []$.each(res.data, function (i, item) {var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：' + item.time + '</span><span class="badge" style="background-color: #5BC0DE;">评论人：' + item.username + '</span>' + item.content + '</li>'rows.push(str)})$('#cmt-list').empty().append(rows.join(''))}})
}getCommentList()$(function () {$('#formAddCmt').submit(function (e) {e.preventDefault()var data = $(this).serialize()$.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {if (res.status !== 201) {return alert('发表评论失败！')}getCommentList()$('#formAddCmt')[0].reset()})})
})function template(id, data) {var str = document.getElementById(id).innerHTMLvar pattern = /{{\s*([a-zA-Z]+)\s*}}/var pattResult = nullwhile (pattResult = pattern.exec(str)) {str = str.replace(pattResult[0], data[pattResult[1]])}return str
}

实现效果：

Ajax — 评论列表相关推荐

评论后的Ajax和刷新分页,Wordpress Ajax 评论分页/翻页 – Fatesinger
WordPress 升级到4.4版本后源代码分页函数失效.只需要给paginate_comments_links函数加上个total参数就可以了.代码已更新. 如果某篇文章评论特别多的时候,我们可以启 ...
php ajax评论系统,ASP+AJAX打造无刷新新闻评论系统
不知上过ChinaRen校友录的朋友们有没有注意,ChinaRen在改版后很多方面都进行了较大的改动.例如留言与回复方面已经不再像以前那样,在每次提交后总得重新加载一下整个页面,碰到网速超慢时,只能干 ...
商品评论html,商品评论列表.html
提交取消 new Vue({ el: '#app', data: { fullLoad:'',dialogVisible:false, jsonData:{"id":" ...
wordpressPHP实现ajax评论,wordpress无刷新评论：无需插件ajax实现wordpress comment无刷新机制...
/** * 这个文件是从根目录下拷贝过来的comment-posts.php文件,主要功能就是提交评论,同时增加了显示出结果的功能. */ if ( 'POST' != $_SERVER['REQUE ...
wordpressPHP实现ajax评论,AJAX_wordpress 为主题添加AJAX提交评论功能的php代码，首先需要在主题的function.php文 - phpStudy...
首先需要在主题的function.php文件里添加一段函数: 复制代码代码如下: < ?php function fail($s) { header('HTTP/1.0 500 Internal ...
amazeui学习笔记--css（常用组件5）--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
仿B站的视频评论列表
1.使用页面部分 HTML <div style="height: 500px" class="commentList" v-infinite-scrol ...
vue饿了么项目实现评论列表的筛选
正如大家买东西都习惯看评论,评论好就买,评论不好就远离;所以评论对大家来说是很重要的,一个商品的评论往往数量挺多,所以评论列表的筛选这个功能也就需求大,在公司的项目中用的比较多. 问题是?如何来实现这 ...
mysql仿网易评论_Android仿抖音评论列表(加评论功能)/网易云音乐列表
老规矩先上效果图 1542355190753.gif 附下Demo 如果想要实现抖音一样的评论功能,就要再列表dialog上面再弹出一个dialog. 那么问题来了:当评论的dialog弹出来的时候 ...

Ajax — 评论列表

实现效果：

Ajax — 评论列表相关推荐

最新文章

热门文章