Ajax图书列表

** vscode、bootstrap.css、jquery.js以及插件Bootstrap 3 Snippets。**
需要实现的功能有：

1.获取并渲染图书列表的数据

2.实现删除图书的功能

3.实现添加图书的功能

功能一实现思路：首先采用$.get()请求接口数据，判断状态码是否是200，不是则获取失败，然后创一个空数组用来存表格中的每一行，循环获取过来的数组对象，得到添加的html内容，然后清空tbody中的内容并将html内容添加到tbody中。

功能二实现思路：首先获取想要删除的id，然后通过$.get()请求接口来删除数据，判断状态码是否是200，不是则删除失败，如果成功就重新刷新页面渲染最新的数据。

功能三实现思路：给添加按钮添加点击事件，获取书名、作者、出版社，然后判断用户输入的内容是否包含空，再采用$.post()请求接口提交数据，判断状态码是否为201，不是则提交失败，如果成功就重新刷新页面渲染最新数据，然后把文本框中输入的内容清空。
最终完整代码如下：

<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="place" placeholder="请输入出版社">
        </div>
        <button id="addbtn" 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">
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
<script>
    $(function() {
        // 获取并渲染图书列表
        function getbooklist() {
            $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
                // 判断状态码是否是200，不是200则获取失败
                if (res.status != 200) {
                    return alert('获取数据失败！')
                }
                // 创一个数组用来存表格中的一行
                var row = [];
                // 循环对象数组
                $.each(res.data, function(index, val) {
                        // console.log('成功');
                        row.push('<tr><td>' + val.id + '</td> <td>' + val.bookname + '</td><td>' + val.author + '</td><td>' + val.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + val.id + '">删除</a></td></tr>')
                    })
                    // 首先清空tbody里面的内容 把row数据渲染到 内容中
                $('#tb').empty().append(row.join(''));
            })
        }
        getbooklist();
        // 删除某一行
        // 通过代理的方式（用一个类来代表另一个类的功能），为动态添加的元素绑定点击事件  
        $('#tb').on('click', '.del', function() {
                // 获取要删除的id  attr获取自定义的返回属性值
                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();
                })
            })
            // 添加图书
        $('#addbtn').on('click', function() {
            // 获取书名 .trim()清除空格
            var bookname = $('#bookname').val().trim();
            // 获取作者
            var author = $('#author').val().trim();
            // 获取出版社
            var place = $('#place').val().trim();
            // 判断用户输入的内容是否为空
            // 注意这里要考虑到只输入空格的情况
            if (bookname.length <= 0 || author.length <= 0 || place.length <= 0) {
                return alert('请输入完整的图书信息');
            }
            // 提交数据
            $.post('http://www.liulongbin.top:3006/api/addbook', {
                bookname: bookname,
                author: author,
                publisher: place
            }, function(res) {
                // 判断是否提交成功
                if (res.status != 201) {
                    return alert('添加图书失败')
                }
                // 如果成功就重新刷新页面
                getbooklist();
                // 然后把文本框中的值设置为空
                var bookname = $('#bookname').val('');
                var author = $('#author').val('');
                var place = $('#place').val('');


            })



        })
    })


</script>