前端发起异步请求，将接收到的所有用户数据以表格的方式展示在网页中。点击表格的删除，根据uid删除用户。_前端发送异步请求实现删除

作者：Gausst松鼠会 | 2024-02-17 06:15:58

踩

前端发送异步请求实现删除

后台：myPro.js文件

const express=require('express');
var router=express.Router();

var pool=require('../pool.js');

//查询所有用户数据
router.get('/pro_List',(req,res)=>{
var sql='select * from xz_user';
pool.query(sql,(err,result)=>{
if(err) throw error;
res.send(result);
})
});

//删除功能
router.get('/ajaxDel',(req,res)=>{
var $uid=req.query.uid;
if(!$uid){
res.send("没获取到用户id");
return;
}
var sql="delete from xz_user where uid=?";
pool.query(sql,[$uid],(err,result)=>{
if(err) throw error;
res.send("1");//删除成功！
});
});

//导出
module.exports=router;

前台：02-prolist.html

<!doctype html>
<html>
<head>
    <title>用户列表</title>
    <meta charset="utf-8">
    <style></style>
</head>
<body οnlοad="loadUsers()">
     <table border="1" width="800px">
        <thead>
           <th>登录名称</th>
           <th>电子邮箱</th>
           <th>联系方式</th>
           <th>用户姓名</th>
           <th>用户性别</th>
           <th>操作</th>
        </thead>
        <tbody id="showBody"></tbody>
     </table>

      //根据uid去删除用户
      function deleteUser(uid){
        //alert(uid);
        //1.创建xhr对象
         var xhr=createXhr();
        //2.监听事件
        xhr.onreadystatechange=function(){
         if(xhr.readyState==4&&xhr.status==200){
           var res=xhr.responseText;
          // console.log(res);
           if(res=="1"){
             alert("删除成功！");
             loadUsers();//删除以后重新加载列表
           }else{
             alert("删除失败！");
           }
         }
        }
        //3.打开连接
        xhr.open("get","/myPro/ajaxDel?uid="+uid,true);
        //4.发送请求
        xhr.send(null);
      }
     </script>

</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/100813