Ajax学习笔记（二）：图书管理案例

### 请求的根路径

> 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   | 出版社                   |

+ 返回示例：

```json
{
  "status": 200,
  "msg": "获取图书列表成功",
  "data": [
    { "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },
    { "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },
    { "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }
  ]
}

```


### 添加图书

+ 接口URL：  /api/addbook
+ 调用方式： POST
+ 参数格式：

| 参数名称  | 参数类型 | 是否必选 | 参数说明 |
| --------- | -------- | -------- | -------- |
| bookname  | String   | 是       | 图书名称 |
| author    | String   | 是       | 作者     |
| publisher | String   | 是       | 出版社   |

+ 响应格式：

| 数据名称 | 数据类型 | 说明                         |
| -------- | -------- | ---------------------------- |
| status   | Number   | 201 添加成功；500 添加失败； |
| msg      | String   | 对 status 字段的详细说明     |

+ 返回示例：

```json
{
    "status": 201,
    "msg": "添加图书成功"
}
```


### 删除图书

+ 接口URL：  /api/delbook
+ 调用方式： GET
+ 参数格式：

| 参数名称 | 参数类型 | 是否必选 | 参数说明 |
| -------- | -------- | -------- | -------- |
| id       | Number   | 是       | 图书Id   |

+ 响应格式：

| 数据名称 | 数据类型 | 说明                                                         |
| -------- | -------- | ------------------------------------------------------------ |
| status   | Number   | 200 删除成功；500 未指定要删除的图书Id；501 执行Sql报错；502 要删除的图书不存在； |
| msg      | String   | 对 status 字段的详细说明                                     |

+ 返回示例：

```json
{
    "status": 200,
    "msg": "删除图书成功！"
}
```

// 删除操作不能这么写 因为我们是动态的追加元素，当时还未出现.del 所以要用事件委托来做
/* $('.del').on('click', function () {
     console.log('ok')}) 
*/


// 通过代理的方式为动态添加的元素绑定点击事件
$('tbody').on('click', '.del', function() {
    // attr() 方法设置或返回被选元素的属性值。
    var del_id = $(this).attr('data-id');
    $.get("http://www.liulongbin.top:3006/api/delbook", {
        id: del_id
    }, function(res) {
        if (res.status !== 200)
            return alert('删除图书失败！')
        else {
            // 如果没有删除失败就证明成功 重新渲染一下图书列表
            getBookList()
        }
    })
})

// 为添加button设置click事件
// 必须是文字 不能是数字！！！！
$('#btnAdd').on('click', function() {
    // val() 方法返回或设置被选元素的值 有参数就是设置 没有参数就是返回相应的值
    // trim() 方法可以去除字符串两端的空格 如果写上了空格也不会算上一个字符
    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) {
        return alert('请填写完整的图书信息！')
    }

    $.post('http://www.liulongbin.top:3006/api/addbook', {
        bookname: bookname,
        author: author,
        publisher: publisher
    }, function(res) {
        if (res.status !== 201)
            return alert('添加图书失败！')
        else {
            getBookList()
        }
        // 将三个input框中的文字清空 可以直接设置为空
        $('#iptBookname').val('')
        $('#iptAuthor').val('')
        $('#iptPublisher').val('')
    })
})