利用jQuery中的Ajax完成评论列表案例

本案例主要利用 boostrap 来快速构建页面 UI

步骤：

• 渲染评论列表UI

index.css，

body {
    padding: 15px;
}

.list-group-item span:first-child {
    background-color: #5bc0de;
}

.list-group-item span:last-child {
    background-color: #f0ad4e;
}

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

    <!--评论面板-->
    
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title">发表评论</h3>
          </div>
          <div class="panel-body">
               <div>评论人：</div>
               <input type="text" class="form-control">
               <div>评论内容：</div>
               <textarea class="form-control"></textarea>
               <button type="submit" class="btn btn-primary">发表评论</button>
          </div>
    </div>
    

    <!-- 评论列表 -->
    
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">评论时间：</span>
            <span class="badge">评论人：</span>
            Item 1
        </li>
    </ul>

 

 

• 获取评论列表数据
• 渲染评论列表

    <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">评论时间：</span>
            <span class="badge">评论人：</span>
            Item 1
        </li> -->
    </ul>

<script src="./lib/jquery.js"></script>
<script src="./js/cmt.js"></script>

$(function(){
  //获取评论列表
  function getCommentList(){
    $.ajax({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/cmtlist',
      data: {},
      success: res => {
        // console.log(res);
        if(res.status !== 200){
          return alert('获取评论列表失败');
        }

        //定义个空的数组来接收返回的数据
        let rows = [];
        $.each(res.data,function(i,item){
          let 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();

 
})

 

• 实现发表评论功能

  // 发表评论
  $("#formAddCmt").submit(function(e){
    e.preventDefault();
    let data = $(this).serialize();
    // console.log(data);
    $.post('http://www.liulongbin.top:3006/api/addcmt',data,function(res){
      if(res.status !== 201){
        return alert('发表评论失败');
      }
      getCommentList();

      //发表成功后清空form表单里的信息
      $("#formAddCmt")[0].reset();
    });
  })