異步請求(刪除json數據)

異步請求(刪除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("失敗")
                    }
                }
            )
        })
    })
})