异步请求(删除json数据)

柔光的暖阳◎ 2022-01-11 06:45 235阅读 0赞

**异步请求(删除json数据)**  
　　删除数据库信息, 同时页面对应的样式也随之删除

**Demo:** 删除雇员信息  
1.在控制层定义删除的方法

//删除数据
        public void jsonRemove(HttpServletRequest req,HttpServletResponse resp) throws Exception {
            //获取要删除的雇员的编号
            Integer empno = Integer.valueOf(req.getParameter("id"));
            //调用业务层的删除方法
            if (this.empservice.removeEmpById(empno)) {
                //成功输出1
                super.print(resp, 1); 
            } else {
                //不成功输出0
                super.print(resp, 0);
            }
        }

2.在 js 中定义删除雇员信息的代码

$(function(){
        $("a:eq(1)").click(function(){
            var table=$("table");
            $("table tr:gt(0)").remove();
            $.ajax({
                type:"post",
                url:"emp/jsonMap",
                data:"cp=1&ls=10&kw=",
                dataType:"json",
                async:false,
                success:function(data){
                    $("table").remove();
                    $("h1").remove();
                    //迭代map集合
                    $.each(data,function(key,value){
                        //过滤掉不是value值不是集合的键值对
                        if(key!='allPages'&&key!='count'&&key!='cp'&&key!='ls'&&key!='kw'){
                            //生成职位信息
                            $("#div1").append("<h1 class='"+key+"'>"+key+"</h1>");
                            //生成每个表格的表头信息(每个表格保存一种职位的雇员信息)
                            $("#div1").append(
                                    "<table class='table table-bordered table-striped table-condensed table-hover' id='"+key+"' border=1>"+
                                        "<tr>"+
                                            "<th>编号</th><th>姓名</th><th>职位</th><th>薪资</th><th>领导编号</th><th>入职日期</th><th>佣金</th><th>部门编号</th><th>操作</th>"+
                                        "</tr>"+
                                    "</table>"
                            );
                            //对当前职位的雇员列表进行迭代
                            //value: 当前职位的雇员集合
                            //index: 动态产生的下标, 从0开始
                            $.each(value,function(index){
                                $("#"+key).append("<tr>"+
                                    "<td>"+value[index].empno+"</td>"+
                                    "<td>"+value[index].ename+"</td>"+
                                    "<td>"+value[index].job+"</td>"+
                                    "<td>"+value[index].sal+"</td>"+
                                    "<td>"+value[index].mgr+"</td>"+
                                    "<td>"+value[index].hiredate+"</td>"+
                                    "<td>"+value[index].comm+"</td>"+
                                    "<td>"+value[index].deptno+"</td>"+
                                    "<td><button class='btn btn-success btn-sx'>删除</button></td>"+
                                "</tr>");
                            })
                        }
                    })
                }
            })
            //为按钮绑定删除的单机事件
            $("button").click(function(){
                //获取要删除的数据的编号
                var empno = $(this).parents("tr").find("td:eq(0)").text();
                var tr = $(this).parents("tr");
                var table = $(this).parents("table");
                //获取职位名称
                var job = $(this).parents("tr").find("td:eq(2)").text();
                //发送异步请求删除数据
                $.post(
                    "emp/jsonRemove",
                    {id:empno},
                    function(data){
                        if(data.trim()=="1"){
                            tr.fadeOut(2000,function(){
                                tr.remove();
                                //判断当前表中 tr 的行数 如果为1则删除表头信息
                                if(table.find("tr").length==1){
                                    table.remove();
                                    $("h1[class='"+job+"']").remove();
                                }
                            })
                        } else {
                            alert("失败")
                        }
                    }
                )
            })
        })
    })

转载于:https://www.cnblogs.com/yslf/p/10846520.html