jquery实现表单数据的增删查改

一、效果图

二、核心代码

• 前端

        searBtn.on("click",function(){
            if(!searIpt.val()){
                bgs.fadeIn(200);
                return;
            }
            getUser('http://127.0.0.1:8080/syssearch',searIpt.val());
        });
        closeMsg.on("click",function(){
            bgs.fadeOut(200);
        });
        restBtn.on("click",function(){
            searIpt.val("");
        });
        addBtn.on("click",function(){
            MsgTitle.html("添加");
            bgs_1.fadeIn(200);
            isaddMsg=true;
        });
        bgs_1.on("click",'#closebtn',function(){
            bgs_1.fadeOut(200);
        }).on("click",'.cha',function(){
            bgs_1.fadeOut(200);
        });
        //点击添加数据
        addMsgbtn.on("click",function(){
            //获取上面列表的所有数据
            var name=unamemsg.val();
            var facid=facidmsg.val();
            var tel=telmsg.val();
            var userfun=userfunmsg.val();
            var leavel=leavelmsg.val();
            var type=typemsg.val();
            if(isaddMsg){
                $.ajax({
                    method:'get',
                    url:'http://127.0.0.1:8080/sysaddMsg',
                    data:{name:name,facid:facid,tel:tel,userfun:userfun,leavel:leavel,type:type},
                    success:function(res){
                        if(res.status=="ok"){
                            getUser('http://127.0.0.1:8080/sysgetData');
                        }
                        bgs_1.fadeOut(200);
                    }
                })
            }
            else{
                $.ajax({
                    method:'get',
                    url:'http://127.0.0.1:8080/sysbianMsg',
                    data:{index:uindex,name:name,facid:facid,tel:tel,userfun:userfun,leavel:leavel,type:type},
                    success:function(res){
                        if(res.status=="ok"){
                            getUser('http://127.0.0.1:8080/sysgetData');
                        }
                        bgs_1.fadeOut(200);
                    }
                })
            }
        })
        getUser('http://127.0.0.1:8080/sysgetData');
        function getUser(url,name){
            $.ajax({
                method:'get',
                url:url,
                data:name?{name:name}:null,
                success:function(res){
                    $(".tab_user").remove();
                    nowDta=res;//获取当前的请求数据
                    var str="";
                    for(var i=0;i<res.length;i++){
                        str+="<tr class='tab_user'><td>"+res[i].name+"</td><td>"+res[i].facid+"</td<td>"+res[i].tel+"</td><td>"+res[i].userfun+"</td><td>"+res[i].leavel+"</td><td>"+res[i].utype+"</td><td><a class='b_user' href='#'>编辑</a><a class='r_user'
href='#'>删除</a></td></tr>";
                    }
                    tableUser.append(str);
                    $(".b_user").each(function(index){
                        $(this).off().on("click",function(){
                            console.log(nowDta[index]);
                            MsgTitle.html("编辑");
                            bgs_1.fadeIn(200);
                            isaddMsg=false;
                            uindex=index;
                            var user=nowDta[index];
                            unamemsg.val(user.name);
                            facidmsg.val(user.facid);
                            telmsg.val(user.tel);
                            userfunmsg.val(user.userfun);
                            leavelmsg.val(user.leavel);
                            typemsg.val(user.type);
                        });
                    });
                    $(".r_user").on("click",function(){
                        $(this).parent().parent().remove();
                    })
                }
            });
        } 

• 后端

//模拟后台
let userData=[
   {name:'刘晓晓',facid:'7652101',tel:18086667777,userfun:'------',leavel:'一级',utype:'高级'},
   {name:'李磊',facid:'7652102',tel:18086668888,userfun:'------',leavel:'三级',utype:'专家'},
   {name:'张三',facid:'7652103',tel:1656524452,userfun:'------',leavel:'一级',utype:'初级'},
   {name:'李四',facid:'7652104',tel:13569966677,userfun:'------',leavel:'一级',utype:'中级'},
   {name:'王五',facid:'7652105',tel:17825063336,userfun:'------',leavel:'二级',utype:'高级'}
];
router.get("/sysgetData",(req,res)=>{
   res.json(userData);
});
router.get("/syssearch",(req,res)=>{
   let query=req.query;
   let name=query.name;
   let arr=[];
   userData.map((item)=>{
       if(item.name==name){
           arr.push(item);
       }
   })
   res.json(arr);
});
router.get("/sysaddMsg",(req,res)=>{
   let query=req.query;
   let name=query.name;
   let facid=query.facid;
   let tel=query.tel;
   let userfun=query.userfun;
   let leavel=query.leavel;
   let type=query.type;
   userData.push({name:name,facid:facid,tel:tel,userfun:userfun,leavel:leavel,utype:type});
   res.json({
       status:'ok'
   });
});
router.get("/sysbianMsg",(req,res)=>{
   let query=req.query;
   let index=query.index;
   let name=query.name;
   let facid=query.facid;
   let tel=query.tel;
   let userfun=query.userfun;
   let leavel=query.leavel;
   let type=query.type;
   userData[index]=({name:name,facid:facid,tel:tel,userfun:userfun,leavel:leavel,utype:type});
   res.json({
       status:'ok'
   });
})