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 '补充删除的提示'

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10832.html