Ajax——基于bootstrap的评论发布案例

1.渲染页面UI结构

导入bootstrap.css  +    jquery.js

插件：bootstrap 3 snippets

1.1添加图书的Panel面板

.bs3-panel-primary: Panel主面板

 <!-- 评论面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body" id="formAddCmt">
            <div>评论人：</div>
            <!-- 添加form-control更好看-->
            <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>

1.2添加评论列表：

.bs3-list-group:badge:自带右浮动的列表

    <!-- 评论列表 -->
    
    <ul class="list-group" id="cmt-list">
        <li class="list-group-item">
            //badge自带右浮动，因此需要互换姓名和时间的顺序
            <span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
            <span class="badge" style="background-color: #5BC0DE;">评论人：</span> Item 1
        </li>
    </ul>

---

2.渲染评论列表

2.1获取评论列表的数据

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()

2.2发表评论

清空表单信息：$('#formAddCmt')[0].reset()

其中jq转dom：$('#formAddCmt')[0]

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

---

3.页面展示