原生JavaScrip ajax图书列表的增删

♡ 小宸轩的前端

已于 2022-03-24 11:19:12 修改

阅读量276

点赞数

文章标签： ajax jquery javascript

于 2021-10-12 08:58:04 首次发布

本文链接：https://blog.csdn.net/qq_43601848/article/details/120716279

版权

渲染页面

删除图书（根据id名）

添加图书

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
  </head>
  <body style="padding: 15px">
    <!-- 添加图书的Panel面板 -->
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加新图书</h3>
      </div>
      <div class="panel-body form-inline">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input
            type="text"
            class="form-control"
            id="iptBookname"
            placeholder="请输入书名"
          />
        </div>

        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input
            type="text"
            class="form-control"
            id="iptAuthor"
            placeholder="请输入作者"
          />
        </div>

        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input
            type="text"
            class="form-control"
            id="iptPublisher"
            placeholder="请输入出版社"
          />
        </div>

        <button id="btnAdd" class="btn btn-primary">添加</button>
      </div>
    </div>

    <!-- 图书的表格 -->
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>
    <script>
      $(function () {
        //1.渲染页面
        getbooksList();
        //实现删除(根据id)
        $("tbody").on("click", "a", function () {
          //获取id
          let bookId = $(this).attr("data-id");
          //发送ajax删除数据
          $.ajax({
            type: "get",
            url: "http://www.liulongbin.top:3006/api/delbook",
            data: {
              id: bookId,
            },
            success: function (res) {
              if (res.status != 200) return alert(res.msg);
              getbooksList();
            },
          });
        });

        //实现添加
        $("#btnAdd").on("click", function () {
          //获取输入框内容
          let bookname = $("#iptBookname").val().trim();
          let author = $("#iptAuthor").val().trim();
          let publisher = $("#iptPublisher").val().trim();
          if (
            bookname.length == 0 ||
            author.length == 0 ||
            publisher.length == 0
          ) {
            return alert("请输入内容，内容不能为空");
          }
          //把数据发送给服务器
          $.ajax({
            type: "post",
            url: "http://www.liulongbin.top:3006/api/addbook",
            data: {
              bookname: bookname,
              author: author,
              publisher: publisher,
            },
            success: function (res) {
              //判断数据是否添加成功
              if (res.status != 201) return alert(res.msg);
              getbooksList();
            },
          });
          $("#iptBookname").val("");
          $("#iptAuthor").val("");
          $("#iptPublisher").val("");
        });
        function getbooksList() {
          //获取图书列表并展示
          $.get("http://www.liulongbin.top:3006/api/getbooks", function (res) {
            //判断获取数据是否成功
            if (res.status != 200) return alert(res.msg);
            //循环遍历数组
            //声明空的数组用于存放tr
            let rows = [];
            res.data.forEach(function (item) {
              //生成tr
              // console.log(item);
              let tr = `<tr>
                    <td>${item.id}</td>
                    <td>${item.bookname}</td>
                    <td>${item.author}</td>
                    <td>${item.publisher}</td>
                    <td><a href="javascript:;" class="del" data-id=${item.id}>删除</a></td>
                  </tr>`;
              //把tr添加到rows里面
              rows.push(tr);
            });
            //将tr渲染到tbody中
            $("tbody").empty().append(rows.join());
          });
        }
      });
    </script>
  </body>
</html>