AJAX编程第二天案例：评论列表

最新推荐文章于 2023-01-18 14:30:00 发布

库库好困

最新推荐文章于 2023-01-18 14:30:00 发布

阅读量331

点赞数 1

分类专栏：八：AJAX编程（看视频）文章标签： ajax

本文链接：https://blog.csdn.net/m0_46597922/article/details/106234360

版权

八：AJAX编程（看视频）专栏收录该内容

7 篇文章 4 订阅

订阅专栏

1. 案例 - 评论列表

1.1 渲染UI结构

在这里插入图片描述

评论列表接口文档

http://www.liulongbin.top:3006

评论列表

接口URL： /api/cmtlist
调用方式： GET
参数格式：无
响应格式：

发表评论

接口URL： /api/addcmt
调用方式： POST
参数格式：
响应格式：

1.2 获取评论列表

    getComments();
    function getComments() {
      $.get('http://www.liulongbin.top:3006/api/cmtlist', function(res) {
        //渲染数据到页面
        let str = '';
        res.data.forEach(item => {
          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>
          `
        });
        //循环结束之后把拼接好的所有li标签放到ul中
        $('#cmt-list').html(str);

      });
    }

1.3 发表评论

    // ------------添加评论--------------
    // 1.监听表单提交事件
    $('#formAddCmt').submit(function(e) {
      // 2.阻止默认行为（默认会提交表单）
      e.preventDefault();
      // 3.使用JS代码获取表单域的值
      let data = $(this).serialize();  //serialize 是根据表单各项的name属性来收集数据的
      // 4.ajax提交数据给接口，从而完成添加
      $.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
        alert(res.msg);
        //判断。如果成功，调用getCommons函数，重新渲染所有数据
        if(res.status === 201) {
          getComments();
        }
      });
  });

完整代码演示：

<!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>Document</title>
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/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">
    
  </ul>

  <script>
    // -------------获取所有评论，并且渲染到页面中-------------
    getComments();
    function getComments() {
      $.get('http://www.liulongbin.top:3006/api/cmtlist', function(res) {
        //渲染数据到页面
        let str = '';
        res.data.forEach(item => {
          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>
          `
        });
        //循环结束之后把拼接好的所有li标签放到ul中
        $('#cmt-list').html(str);

      });
    }


    // ------------添加评论--------------
    // 1.监听表单提交事件
    $('#formAddCmt').submit(function(e) {
      // 2.阻止默认行为（默认会提交表单）
      e.preventDefault();
      // 3.使用JS代码获取表单域的值
      let data = $(this).serialize();  //serialize 是根据表单各项的name属性来收集数据的
      // 4.ajax提交数据给接口，从而完成添加
      $.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
        alert(res.msg);
        //判断。如果成功，调用getCommons函数，重新渲染所有数据
        if(res.status === 201) {
          getComments();
        }
      });
  });
  </script>
</body>
</html>

监听表单提交事件说明

监听表单提交事件，可以有下面两种写法：
在这里插入图片描述

库库好困

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AJAX编程第二天案例：评论列表

1. 案例 - 评论列表1.1 渲染UI结构评论列表接口文档http://www.liulongbin.top:3006评论列表接口URL： /api/cmtlist调用方式： GET参数格式：无响应格式：发表评论接口URL： /api/addcmt调用方式： POST参数格式：响应格式：1.2 获取评论列表 getComments(); function getComments() { $.get('http://www.liu
复制链接

扫一扫

专栏目录