【jquery Ajax 练习】图书管理

举报
坚毅的小解同志 发表于 2022/11/21 19:01:15 2022/11/21
【摘要】 【jquery Ajax 练习】图书管理

 图书管理

        目标

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

        渲染UI结构

     所需要到的库

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

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

<body style="padding: 50px;">


    <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>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>

</body>

编辑

         获取原始图书数据

                文档

请求的根路径

http://www.liulongbin.top:3006

图书列表

  • 接口URL: /api/getbooks
  • 调用方式: GET
  • 参数格式:
参数名称 参数类型 是否必选 参数说明
id Number 图书Id
bookname String 图书名称
author String 作者
publisher String 出版社
  • 响应格式:
数据名称 数据类型 说明
status Number 200 成功;500 失败;
msg String 对 status 字段的详细说明
data Array 图书列表
+id Number 图书Id
+bookname String 图书名称
+author String 作者
+publisher String 出版社

                 代码

获取接口内的图书数据。

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

编辑

         原始数据的添加

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

  let rows = [];
            $.each(res.data, function (i, item) {
                rows.push(`<tr><td>${item.id} </td><td> ${item.bookname}</td><td> ${item.author}</td><td>${item.publisher} </td><td><a href='javascript:;' class='del'>删除</a></td></tr>`)
            })
            $('#tb').empty().append(rows)
        })

        编辑

         删除图书功能

                文档

删除图书

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


                 代码

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

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

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

        添加图书功能

                文档

添加图书

  • 接口URL: /api/addbook
  • 调用方式: POST
  • 参数格式:
参数名称 参数类型 是否必选 参数说明
bookname String 图书名称
author String 作者
publisher String 出版社
  • 响应格式:
数据名称 数据类型 说明
status Number 201 添加成功;500 添加失败;
msg String 对 status 字段的详细说明


                代码 

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

 $('#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('添加失败');
                        }
                        a()
                        $('#iptBookname').val('');
                        $('#iptAuthor').val('');
                        $('#iptPublisher').val('');
                    }
            }
        )
        a()
    })

编辑


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。