异步请求(删除json数据)

Posted 2021-11-28 yslf

异步请求(删除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("失败")
                    }
                }
            )
        })
    })
})