核心原理
1、导入bootstrap.css 和jquery.js；
2、用bootstrap搭建出样式；
3、创建cmt.js用来写js；
4、获取留言数据：自定义函数利用$.ajax来GET接口数据，创建空数组，each循环创建字符串添加到空数组；
5、把要获取的数据input都修改成from；
6、发表留言：当鼠标点击submit，获取from里面的数据，并且把它post到接口中，再次调用获取留言数据函数；
html
<body style="padding: 20px;">
<!-- 评论面板 -->
<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" />
<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: #58c0de;">评论人：</span>
Ttem1
</li>
</ul>
js
// 获取留言数据
function getCommentList() {
$.ajax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/cmtlist',
// data: {},
success: function(res){
if(res.status !== 200) {
alert('获取图书列表失败！')
}
console.log('获取成功！');
var rows = [];
$.each(res.data,function(i,item){
rows.push('<li class="list-group-item">'+item.content+'<span class="badge" style="background-color: #F0ad4e;">评论时间：'+item.time+'</span><span class="badge" style="background-color: #58c0de;">评论人：'+item.username+'</span></li>')
})
$('#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] 把jquery对象转成原生js对象，调用dom方法 reset()
$('#formAddCmt')[0].reset()
})
})
})
网友评论