Javascript 中AJAX的图书管理代码实例详解

更新时间：2022年02月11日 14:35:46 作者：执手天涯@

这篇文章主要为大家详细介绍了AJAX的图书管理代码实例，使用数据库，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

1、接口文档

在这里插入图片描述

2、代码结构

<!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>
<style>
    body {
        margin: 20px 20px;
    }
</style>
<body>
    <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="bookName" placeholder="请输入书名">
            </div>
            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="author" placeholder="请输入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="ippublisher" placeholder="请输入出版社">
            </div>

            <button type="button" id="btnSend" 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>
</body>
<script>
    // 渲染图书信心到表格中
    $(function () {
        // 发起ajax请求获取图书列表信息
        getBookList();
        function getBookList() {
            $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                if (res.status !== 200) return alert('获取图书信息失败！！')
                // 定义一个空数组存放图书信息
                var row = [];
                // 遍历获取到的信息添加到row数组
                $.each(res.data, function (i, item) {
                    row.push(`
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.bookname}</td>
                            <td>${item.author}</td>
                            <td>${item.publisher}</td>
                            <td>
                                <a href="" id="del" data-id="${item.id}">删除</a>
                            </td>
                        </tr>
                    `)
                })
                // 将数组数据渲染到页面
                $('#tb').empty().append(row.join(''))
            })
        }
        // 删除图书信息
        $('tbody').on('click', '#del', function () {
            var id = $(this).attr('data-id');
            $.get('http://www.liulongbin.top:3006/api/delbook', {
                id: id
            }, function (res) {
                if (res.status !== 200) return alert('删除图书失败！！')
                getBookList();
            })
        })
        // 添加图书
        $('#btnSend').on('click', function () {
            var bookName = $('#bookName').val().trim()
            var author = $('#author').val().trim()
            var ippublisher = $('#ippublisher').val().trim()
            if (bookName.length <= 0 || author.length <= 0 || ippublisher.length <= 0) {
                return alert('请填写完整的图书信息！')
            }
            // 发起ajax请求进行图书信息的添加
            $.post('http://www.liulongbin.top:3006/api/addbook', {
                bookname: bookName,
                author: author,
                publisher: ippublisher
            }, function (res) {
                if (res.status !== 201) return alert('添加图书信息失败！！' + res.msg)
                getBookList()
                $('#bookName').val('')
                $('#author').val('')
                $('#ippublisher').val('')
            })
        })
    })
</script>
</html>

3、案例效果

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

div+css布局的图片连续滚动js实现代码
整理一个div+css图片连续滚动代码，原理跟脚本之家之前发布的文章一样。
2010-05-05
JS实现的排列组合算法示例
这篇文章主要介绍了JS实现的排列组合算法,结合完整实例形式详细分析了排列组合算法的原理与javascript相关实现技巧,需要的朋友可以参考下
2019-07-07
PHP中使用微秒计算脚本执行时间例子
这篇文章主要介绍了PHP中使用微秒计算脚本执行时间例子,本文先是讲解了microtime函数的一些知识,然后给出了一个计算脚本运行时间的类,需要的朋友可以参考下
2014-11-11
js实现单一html页面两套css切换代码
研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果与大家分享下，感兴趣的朋友可以参考下哈，希望可以帮助到你
2013-04-04
layui实现点击按钮给table添加一行
想实现点击按钮在表格添加一行的功能，但发现layui并未集成该工具栏，因此，需要自己手动添加这个功能；这篇文章主要介绍了layui点击按钮给table添加一行,需要的朋友可以参考下
2018-08-08
基于three.js实现简易照片墙效果
这篇文章主要为大家详细介绍了基于three.js实现简易照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
理解javascript模块化
这篇文章主要帮助大家深入理解javascript模块化，感兴趣的小伙伴们可以参考一下
2016-03-03
JS中FileReader类实现文件上传及时预览功能
这篇文章主要为大家详细介绍了JS中FileReader类实现文件上传及时预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
JavaScript变量基本使用方法实例分析
这篇文章主要介绍了JavaScript变量基本使用方法,结合实例形式分析了JavaScript变量的类型、使用注意事项及命名规范,需要的朋友可以参考下
2019-11-11
javascript实现简易的计算器
这篇文章主要为大家详细介绍了javascript实现简易的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01