用bootstrap和jquery实现的评论获取界面

雪落故里

于 2023-06-15 12:54:50 发布

阅读量177

点赞数

分类专栏： demo集合文章标签： bootstrap jquery javascript

本文链接：https://blog.csdn.net/m0_53547977/article/details/131225539

版权

demo集合专栏收录该内容

3 篇文章 0 订阅

订阅专栏

获取评论列表

界面如图:
在这里插入图片描述
完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>评论列表</title>

  <link rel="stylesheet" href="../res/bootstrap.css" />
  <script src="../res/jquery.js"></script>
</head>

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

<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()  //重置表单内容
      })
    })
  })
</script>

</html>