• 【jquery Ajax 练习】图书管理

       

    ✍️ 作者简介: 前端新手学习中。
    💂 作者主页: 作者主页查看更多前端教学
    🎓 专栏分享：css重难点教学       Node.js教学 从头开始学习

    目录

    图书管理

            目标

            渲染UI结构

             获取原始图书数据

                    文档

                     代码

             原始数据的添加

             删除图书功能

                    文档

                     代码

            添加图书功能

                    文档

                    代码 

    图书管理

            目标

    通过ajax连接后台，进行后台图书数据的增删，然后将图书数据显示到页面上。

            渲染UI结构

         所需要到的库

    • 用到的css库 bootstrap.css
    • 用到的javascript库jquery.js
    • 用到的vscode 插件 Bootstrap 3 Snippets

     别忘了导入相关库，使用bootstrap库创建ui界面。

    1. <body style="padding: 50px;">
    2.  
    3.  
    4.     <div class="panel panel-primary">
    5.         <div class="panel-heading">
    6.             <h3 class="panel-title">添加新图书h3>
    7.         div>
    8.         <div class="panel-body form-inline">
    9.  
    10.             <div class="input-group">
    11.                 <div class="input-group-addon">书名div>
    12.                 <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
    13.  
    14.             div>
    15.             <div class="input-group">
    16.                 <div class="input-group-addon">作者div>
    17.                 <input type="text" class="form-control" id="iptAuthor" placeholder="请输入书名">
    18.  
    19.             div>
    20.             <div class="input-group">
    21.                 <div class="input-group-addon">出版社div>
    22.                 <input type="text" class="form-control" id="iptPublisher" placeholder="请输入书名">
    23.  
    24.             div>
    25.             <button id="btnAdd" class="btn btn-primary">添加button>
    26.         div>
    27.     div>
    28.  
    29.  
    30.  
    31.     <table class="table table-bordered table-hover">
    32.         <thead>
    33.             <tr>
    34.                 <th>idth>
    35.                 <th>书名th>
    36.                 <th>作者th>
    37.                 <th>出版社th>
    38.             tr>
    39.         thead>
    40.         <tbody>
    41.             <tr>
    42.                 <td>td>
    43.             tr>
    44.         tbody>
    45.     table>
    46.  
    47. body>

             获取原始图书数据

                    文档

    请求的根路径

    http://www.liulongbin.top:3006

    图书列表

    • 接口URL： /api/getbooks
    • 调用方式： GET
    • 参数格式：
    参数名称参数类型是否必选参数说明
    idNumber否图书Id
    booknameString否图书名称
    authorString否作者
    publisherString否出版社
    • 响应格式：
    数据名称数据类型说明
    statusNumber200 成功；500 失败；
    msgString对 status 字段的详细说明
    dataArray图书列表
    +idNumber图书Id
    +booknameString图书名称
    +authorString作者
    +publisherString出版社

                     代码

    获取接口内的图书数据。

    1.     function a() {
    2.         $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
    3.             if (res.status !== 200) {
    4.                 return console.log(获取数据失败);
    5.             }
    6.             console.log(res);
    7.         })
    8.     }
    9.     a()

             原始数据的添加

                    将获取到的初始数据全部添加到表格中。

    1.   let rows = [];
    2.             $.each(res.data, function (i, item) {
    3.                 rows.push(`${item.id}  ${item.bookname} ${item.author}${item.publisher} 删除`)
    4.             })
    5.             $('#tb').empty().append(rows)
    6.         })

            

             删除图书功能

                    文档

    删除图书

    • 接口URL： /api/delbook
    • 调用方式： GET
    • 参数格式：
    参数名称参数类型是否必选参数说明
    idNumber是图书Id
    • 响应格式：
    数据名称数据类型说明
    statusNumber200 删除成功；500 未指定要删除的图书Id；501 执行Sql报错；502 要删除的图书不存在；
    msgString对 status 字段的详细说明

                     代码

    需要在 a标签里添加一个data-id自定义属性，

    删除后台服务器中的图书数据，并重新调用获取数据进行显示。

    data-id=${item.id}
    1.     $('tbody').on('click', '.del', function () {
    2.         let id = $(this).data('id');
    3.         console.log(id);
    4.         $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
    5.             console.log(res);
    6.             if (res.status !== 200) {
    7.                 return alert('删除失败');
    8.             }
    9.             a()
    10.         })
    11.     })

            添加图书功能

                    文档

    添加图书

    • 接口URL： /api/addbook
    • 调用方式： POST
    • 参数格式：
    参数名称参数类型是否必选参数说明
    booknameString是图书名称
    authorString是作者
    publisherString是出版社
    • 响应格式：
    数据名称数据类型说明
    statusNumber201 添加成功；500 添加失败；
    msgString对 status 字段的详细说明

                    代码 

    添加后台服务器中的图书数据，并重新调用获取数据进行显示。

    1.  $('#btnAdd').on('click', function () {
    2.         //获取填写内容 不能为空
    3.         let bookname = $('#iptBookname').val().trim();
    4.         let author = $('#iptAuthor').val().trim();
    5.         let publisher = $('#iptPublisher').val().trim();
    6.         if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
    7.             return alert('请填写完整图书信息')
    8.         }
    9.         $.ajax(
    10.             {
    11.                 type: 'post',
    12.                 url: 'http://www.liulongbin.top:3006/api/addbook',
    13.                 data: {
    14.                     bookname: bookname,
    15.                     author: author,
    16.                     publisher: publisher
    17.                 },
    18.                success:
    19.                     function (res) {
    20.                         if (res.status !== 201) {
    21.                             return alert('添加失败');
    22.                         }
    23.                         a()
    24.                         $('#iptBookname').val('');
    25.                         $('#iptAuthor').val('');
    26.                         $('#iptPublisher').val('');
    27.                     }
    28.             }
    29.         )
    30.         a()
    31.     })

  • 相关阅读:
    Android Studio 上 .so文件无法提交到svn上
    前端面试（手写题）
    Docker的数据卷
    游戏服务器成DDoS最大攻击重灾区
    Lo4j2 重写日志，Lo4j2日志 脱敏思路
    【点云处理】点云法向量估计及其加速(4)
    “蔚来杯“2022牛客暑期多校训练营1（补题）——ADG
    Windows版 PostgreSQL 利用 pg_upgrade 进行大版升级操作
    ConstraintLayout新手玩家避坑指南
    第8章 - 异构系统的协同控制及最优控制 --＞ 异构系统
  • 原文地址：https://blog.csdn.net/m0_62360527/article/details/127642073