Node学习（九）04-管理系统之删除英雄——ajax请求数据之get请求写法完成删除、remove()移除DOM元素 & 服务端之完成删除的接口-sql中的delete语句

Node学习（九）04-管理系统之删除英雄——ajax请求数据之get请求写法完成删除、remove()移除DOM元素 & 服务端之完成删除的接口-sql中的delete语句

六、完成删除

分析：

点击删除按钮的时候，完成删除操作；

为了明确删除的数据是哪一条，所以要在删除标签上设置一个data-id属性，值就是当前数据的id。

给删除按钮添加单击事件，要使用事件委托的方式

6.1 前端-发送ajax请求

给删除标签，添加data-id属性：

在当前页面(index.html)中，完成下面的js代码，实现ajax请求：

// 点击删除按钮的时候，获取标签的data-id属性的值，发送ajax请求到 deleteHero接口
    $('body').on('click', '.btn-danger', function () {
      var id = $(this).attr('data-id'); // this.dataset.id 也可以

      var that = $(this);

      $.get('/deleteHero', {id: id}, function (res) {
        alert(res.message);
        if (res.code === 200) {
          // 以DOM的方式，移除掉当前英雄所在的tr
          that.parents('tr').remove();
        }
      }, 'json');
    });

执行 git add . 和 git commit -m '前端发送请求，完成删除'

6.2 服务端-完成删除的接口

// 5. 完成删除的接口
app.get('/deleteHero', (req, res) => {
    // 获取url上的id参数
    let id = req.query.id;
    if (!id || isNaN(id)) {
        res.send('参数错误');
        return;
    }
    // 写一条delete语句，完成删除即可
    db('delete from heroes where id=?', id, (err, result) => {
        if (err) {
            res.send({code: 201, message: '删除失败'});
        } else {
            res.send({code: 200, message: '删除成功'});
        }
    });
});

执行 git add . 和 git commit -m '服务端完成删除接口'

6.3 补充删除提示

在单击删除按钮的时候，给出询问：是否要删除？

index.html完整代码

 <script>
    // 点击删除按钮的时候，获取标签的data-id属性的值，发送ajax请求到 deleteHero接口
    $('body').on('click', '.btn-danger', function () {
      if (!confirm('你确定要删除吗')) {
        return;
      }
      var id = $(this).attr('data-id'); // this.dataset.id 也可以

      var that = $(this);

      $.get('/deleteHero', { id: id }, function (res) {
        alert(res.message);
        if (res.code === 200) {
          // 以DOM的方式，移除掉当前英雄所在的tr
          that.parents('tr').remove();
        }
      }, 'json');
    });
  </script>

执行效果1

执行效果2

执行 git add . 和 git commit -m '补充删除的提示'