目录
实现功能介绍：
1、通过bootstrap快速制作html面板
2、通过Ajax向服务器发送参数
3、将获取的参数通过循环的形式插入到数组中
4、将数组中的数据渲染到UI结构中
5、点击提交按钮时，再重新获取数据并渲染
6、点击回车，也能提交评论
展示：
1、引入文件
bootstrap文件
jquery文件
自己写的js文件
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="comment.js"></script>2、快速实现html代码
提示：当你导入bootstrap之后下载插件 Bootstrap 3 Snippets
输入 bs3-panel 就会有提示，选择其中的primary就能快速生成框架
生成结构如下所示：
其他结构类似：
<style>
.input-group {
margin-bottom: 20px;
}
#time {
background-color: #f0ad4e;
}
#comment {
background-color: #5bc04e;
}
</style>
</head>
<body style="padding:30px">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<form class="panel-body iptform">
<div class="input-group">
<div class="input-group-addon "> 评 论 人 ： </div>
<input type="text" class="form-control iptpeople" id="exampleInputAmount" placeholder="请输入您的名字~" name="username">
</div>
<div class="input-group">
<div class="input-group-addon">评论内容：</div>
<textarea style="resize:none" name="content" id="input" class="form-control iptcomment" rows="3" required="required" placeholder="请输入您的评论~"></textarea>
</div>
<button type="submit" class="btn btn-primary iptbutton">发表评论</button>
</form>
<ul class="list-group" style="color: rgb(176, 26, 199)">
<li class="list-group-item">
<span class="badge" id="time">评论时间:</span>
<span class="badge" id="comment">评论人：</span>
</li>
</ul>
</div>结果展示：
3、js代码
代码中的注释很多，我认为足够详细了，如果有问题，欢迎评论~
// 声明一个函数，通过get方法向服务器发送请求，并将赶回的数据渲染到页面上
function getComment() {
$.ajax({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/cmtlist',
success: function(res) {
var rows = [];
$.each(res.data, function(i, item) {
// 没遍历一次往数组中push一次 往里面插入当前循环的数据
rows.push(' <li class="list-group-item">' + item.content + '<span class="badge" id="time">评论时间:' + item.time + '</span><span class="badge" id="comment">评论人：' + item.username + '</span></li>');
})
// 往ul中插入 rows数组，每个数据之间用空格隔开
$(".list-group").empty().append(rows.join(''));
}
});
$(".iptpeople").val("周百万");
}
getComment();
// 发表评论 给表单绑定submit事件 type="submit"才行
$(function() {
$(".iptform").on('submit', function(e) {
e.preventDefault();
// 如果标签没有name属性就获取不到数据
var data = $(this).serialize();
// 将获取的数据通过post方法发送到服务器中
$.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
console.log(res);
// 如果发送成功就重新获取数据渲染一下 如果失败就停止并提醒用户
if (res.status !== 201) {
return alert("发送失败！");
}
getComment();
// 清空一下输入框 将jquery元素转化为原生的再使用reset方法
$(".iptform")[0].reset();
$(".iptpeople").val("周百万");
});
})
// 当在评论内容框中点击回车，也执行发表评论
$(".iptcomment").on('keypress', function(e) {
if (e.keyCode == 13) {
// 通过编码的方式，执行form的submit事件
$(".iptform").submit();
}
})
})服务器网址来自于黑马程序员，黑马很好欢迎去学习~