ajax案例：评论

最新推荐文章于 2024-07-16 20:32:10 发布

Youser511

最新推荐文章于 2024-07-16 20:32:10 发布

阅读量112

点赞数

分类专栏：学习文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_45025670/article/details/126101242

版权

学习专栏收录该内容

92 篇文章 1 订阅

订阅专栏

使用jQuery的
插入

  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

页面：

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

<!-- 评论列表 -->

<ul class="list-group" id="cmtlist">
  <li class="list-group-item">
    <span class="badge" style="background-color: orchid;">评论时间:</span>
    <span class="badge" style="background-color:aquamarine;">评论人:</span>
    评论内容
  </li>
</ul>

js：

function getCmtList () {
  $.ajax({
    type: 'GET',
    url: 'http://www.liulongbin.top:3006/api/cmtlist',
    success: function (res) {
      console.log(res)
      let { data, msg, status } = res;
      if (status !== 200) return alert(msg);
      var rows = []
      $.each(data, function (i, item) {
        var str = `
        <li class="list-group-item">
          <span class="badge" style="background-color: orchid;">评论时间:${item.time}</span>
          <span class="badge" style="background-color:aquamarine;">评论人:${item.username}</span>
          ${item.content}
        </li>
        `
        rows.push(str)
      })
      // console.log(rows)
      $("#cmtlist").empty().append(rows.join(''))
    }
  })
}

getCmtList()


// 添加

$(function () {
  $('#fromAddCmt').submit(function (e) {
    // 阻止默认行为
    e.preventDefault();
    // 快速获取表单数据
    var data = $(this).serialize()
    // console.log(data)
    // ajax发送请求实现添加
    $.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {
      // console.log(res,'tj')
      let { status, msg } = res;
      if (status !== 201) return alert(msg);

      // 重新渲染
      getCmtList()

      // 表单数据为空
      $("#fromAddCmt")[0].reset()
      
    })
  })
})