Ajax--初识Ajax--接口和案例 - 图书管理

输入bs3-table选择有边框的快速生成 

渲染图书列表（核心代码）

function getBookList() {
    // 1. 发起 ajax 请求获取图书列表数据
    $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
        // 2. 获取列表数据是否成功
        if (res.status !== 200) return alert('获取图书列表失败！')
        // 3. 渲染页面结构
        var rows = []
        $.each(res.data, function(i, item) { // 4. 循环拼接字符串
            rows.push('' + item.id + '' + item.bookname + '' + item.author + '' + item.publisher + '删除')
        })
        $('#bookBody').empty().append(rows.join('')) // 5. 渲染表格结构
    })
}

 遍历的对象是res.data

 rows的值为

 删除图书（核心代码）

// 1. 为按钮绑定点击事件处理函数
$('tbody').on('click', '.del', function() {
    // 2. 获取要删除的图书的 Id
    var id = $(this).attr('data-id')
    $.ajax({ // 3. 发起 ajax 请求，根据 id 删除对应的图书
        type: 'GET',
        url: 'http://www.liulongbin.top:3006/api/delbook',
        data: { id: id },
        success: function(res) {
            if (res.status !== 200) return alert('删除图书失败！') 
            getBookList() // 4. 删除成功后，重新加载图书列表
        }
    })
})

$('.del').on('click',function(){
               console.log('ok');
           })

这样绑定是无效的，因为a是后面添加生成的，页面是没有存在的，因此我们要用数据代理的方式，也就它的父元素tbody,因为tbody一开始就是存在的

 $('tbody').on('click','.del')

这句话的意思就是tbody代理.del生成事件 

  添加图书（核心代码）

// 1. 检测内容是否为空
var bookname = $('#bookname').val()
var author = $('#author').val()
var publisher = $('#publisher').val()
if (bookname === '' || author === '' || publisher === '') {
    return alert('请完整填写图书信息！')
}
// 2. 发起 ajax 请求，添加图书信息
$.post(
    'http://www.liulongbin.top:3006/api/addbook',
    { bookname: bookname, author: author, publisher: publisher },
    function(res) {
        // 3. 判断是否添加成功
        if (res.status !== 201) return alert('添加图书失败！')
        getBookList() // 4. 添加成功后，刷新图书列表
        $('input:text').val('') // 5. 清空文本框内容
    }
)