ajax图书管理案例

最新推荐文章于 2024-04-20 03:19:45 发布

一夕ξ

最新推荐文章于 2024-04-20 03:19:45 发布

阅读量376

点赞数

本文链接：https://blog.csdn.net/qq_45387575/article/details/123878505

版权

前端学习专栏收录该内容

77 篇文章 7 订阅

订阅专栏

rows数组中就是：

rows.join('')整体添加

单引号里面如何加参数

语法可以通过"'+ 参数+'" 即2 双引号里面加2 单引号加两个加号 data="'+url+'"

str.trim()：可以去除字符串两端的空格

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式的列重置</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.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 input-group-lg ">
                <span class="input-group-addon ">书名</span>
                <input type="text " class="form-control " id='iptBookname' placeholder="请输入书名 ">
            </div>
            <div class="input-group input-group-lg ">
                <span class="input-group-addon ">作者</span>
                <input type="text " class="form-control " id='iptAuthor' placeholder="请输入作者 " style="width:300px ">
            </div>
            <div class="input-group input-group-lg ">
                <span class="input-group-addon ">出版社</span>
                <input type="text " class="form-control " id='iptPublisher' placeholder="请输入出版社 " style="width:300px ">
            </div>
            <button id="btnAdd" class="btn btn-primary ">添加</button>
        </div>
    </div>
    <!-- 图书表格 -->
    <table class="table table-bordered">

        <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) {
                        console.log(res)
                            // console.log(res)  判断获取数据是否成功
                        if (res.status != 200) return alert('获取数据失败')
                            //如果获取成功，就需要对获取到的数据进行循环，将其添加到表格中，会拿到一个图书对象
                        var 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" data-id="' + item.id + '">删除</a></td></tr>')
                        })
                        console.log(rows);
                        //将数据添加到表格中
                        $('#tb').empty().append(rows.join(''))
                    })
            }
            getBooklist()
                //按下删除键，不仅要把显示中的对应图书删去，还要删去数据库中的图书信息
                //给a链接添加事件，根据id来拿到唯一的图书数据
                // $('.del').on({
                //     click: function() {
                //         alert(2)
                //     }
                // })
                //没有触发--因为a链接是后期通过DOM操作判断进去的。后期判断的元素无法这样绑定事件，只能通过代理的形式。
                //因此事件需要绑定在他的父级上，然后再利用事件委托到自己上
            $('tbody').on('click', '.del', function() {
                    var id = $(this).attr('data-id')
                        //删除图书功能，需要发起get请求 //必须指定删除的id，根据id删除图书
                    console.log(id);
                    $.get('http://www.liulongbin.top:3006/api/delbook', {
                        id: id
                    }, function(res) {
                        if (res.status !== 200) return alert('删除失败')
                        getBooklist()
                    })
                })
                //为添加按钮绑定事件，获取前面三个文本框中的值，对值进行非法值的校验不能为空。里面有内容就发请求，添加图书




            $('#btnAdd').on({
                click: function() {
                    //获取文本框的值
                    var bookname = $('#iptBookname').val().trim()
                    var author = $('#iptAuthor').val().trim()
                    var publisher = $('#iptPublisher').val().trim()
                    if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
                        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('')
                        })
                        //还要屏蔽掉空格
                        //添加图书功能，需要post。给服务器根据接口文档
                }
            })
        })
    </script>
</body>

</html>