AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【jquery Ajax 练习】图书管理

2022-12-09 175
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【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>

    image.gif

    image.gif编辑

            获取原始图书数据

                   文档

    请求的根路径

    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()

        image.gif

        image.gif编辑

                原始数据的添加

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

        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)
        })

        image.gif

               image.gif编辑

                删除图书功能

                       文档

        删除图书

          • 接口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}

            image.gif

            $('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()
        })
    })

            image.gif

                   添加图书功能

                           文档

            添加图书

              • 接口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()
    })

                image.gif

                image.gif编辑


                文章标签：
                JavaScript
                前端开发
                SQL
                API
                关键词：
                jQuery ajax
                ajax jquery
                jQuery练习
                ajax.js jQuery
                jQuery管理
                解圃
                目录
                相关文章
                N..
                |
                6月前
                |
                XML JSON 前端开发
                jQuery实现Ajax
                jQuery实现Ajax
                N..
                65 1
                天玄TX
                |
                6月前
                |
                XML 前端开发 JavaScript
                jQuery中ajax如何使用
                jQuery中ajax如何使用
                天玄TX
                66 0
                杨校
                |
                5月前
                |
                前端开发 JavaScript
                杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
                杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
                杨校
                44 0
                杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
                dufadayang
                |
                29天前
                |
                前端开发 JavaScript 数据处理
                JQuery 拦截请求 | Ajax 请求拦截
                【10月更文挑战第4天】
                dufadayang
                65 1
                听白
                |
                2月前
                |
                JSON 前端开发 JavaScript
                jQuery AJAX 方法
                jQuery AJAX 方法
                听白
                31 1
                杀死一只知更鸟debug
                |
                2月前
                |
                JSON JavaScript 前端开发
                Jquery常用操作汇总，dom操作，ajax请求
                本文汇总了jQuery的一些常用操作，包括DOM元素的选择、添加、移除，表单操作，以及如何使用jQuery发送Ajax请求，涵盖了GET、POST请求和文件上传等常见场景。
                杀死一只知更鸟debug
                23 2
                听白
                |
                2月前
                |
                JSON 前端开发 JavaScript
                jQuery AJAX 方法
                jQuery AJAX 方法
                听白
                20 1
                Yaiba123
                |
                3月前
                |
                前端开发 JavaScript Java
                SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
                关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码，包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面（单文件上传和多文件上传加表单内容）以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
                Yaiba123
                142 0
                SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
                乐多_L
                |
                3月前
                |
                XML JSON 前端开发
                AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？
                AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？
                乐多_L
                31 0
                热爱技术的小郑
                |
                3月前
                |
                JavaScript 前端开发
                Ajax的使用（jquery的下载）
                这篇文章是关于Ajax学习笔记的分享，包括JQuery的下载方式、Ajax的主要参数说明，以及如何在网页中使用Ajax进行异步请求的示例代码。
                热爱技术的小郑
                32 0