JSP图书管理案例

最新推荐文章于 2023-01-17 15:14:00 发布

一斤阳光

最新推荐文章于 2023-01-17 15:14:00 发布

阅读量471

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44302503/article/details/123832591

版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

界面展示

在这里插入图片描述
可通过添加和删除动态更改表格内的内容

代码

<!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="bootstrap/css/bootstrap.css">
      <script src="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 () {//获取图书列表数据
                  function getBookList() {
                        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                              if (res.status !== 200) {
                                    return alert('获取数据失败！')
                              }
                              //将对象里的data数组内容遍历，全部放到rows数组里
                              var rows = []
                              $.each(res.data, function (i, element) {
                                    rows.push('<tr><td>' + element.id + '</td><td>' + element.bookname + '</td><td>' + element.author + '</td><td>' + element.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + element.id + '">删除</a></td></tr>')
                              })
                              //将rows数组添加至tbody中
                              $('#tb').empty().append(rows.join(''))//join作用是在元素之间添加空格
                        })
                  }

                  getBookList();


                  //删除操作
                  //标签a是append()动态生成的，无法直接绑定事件，此处需要用其父节点tbody代理a节点来响应事件
                  $('tbody').on('click', '.del', function () {
                        var id = $(this).attr('data-id')//运用自定义属性来保存当前行的id数据
                        /* console.log(id); *///点击a标签便可打印当前行a标签的data-id属性
                        $.get('http://www.liulongbin.top:3006/api/delbook', {
                              id: id
                        }, function (res) {
                              if (res.status !== 200) {

                                    return alert('删除图书失败！')
                              }
                              console.log(res);
                              getBookList();//重新获取列表，刷新页面
                        })
                  })

                  //添加图书操作
                  $('#btnAdd').on('click', function () {
                        var bookname = $('#iptBookname').val().trim()//trim方法可去除字符串两端的空格
                        var author = $('#iptAuthor').val().trim()
                        var publisher = $('#iptPublisher').val().trim()
                        if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
                              return alert('请填写完整的图书信息！')
                        }

                        //添加请求
                        $.post('http://www.liulongbin.top:3006/api/addbook', {
                              bookname: bookname,
                              author: author,
                              publisher: publisher
                        }, function (res) {
                              if (res.status !== 201) {
                                    return alert('添加图书失败！')
                              }
                              getBookList()//重新获取列表，刷新页面
                              $('#iptBookname').val('')
                              $('#iptAuthor').val('')
                              $('#iptPublisher').val('')//将文本框的内容清空
                        })
                  })
            })
      </script>
</body>

</html>