首页 > 代码库 > javaScript（拼写树形）+ajax请求，去后台查找数据

javaScript（拼写树形）+ajax请求，去后台查找数据

2024-07-10 15:37:11   220人阅读

第一步：页面加载完成时，利用jquery中的一函数，调用js方法，js方法，发送ajax请求，去后台查找父类权限集合，响应回来json格式的数据，对数据进行操作，往页面上添加内容

 1 //页面初始化加载菜单内容 2     $(document).ready(function(){ 3         loadPower(0);         4     }); 5  6 //加载一级权限菜单     7     function loadPower(pId){ 8         $.ax({ 9             type: "get",10             url: "<%=request.getContextPath()%>/master/sysPower_loadParentPower.action?sysPower.sysParentId="+pId,11             async: false,12             dateType: "json",13             success: function(resp){14                 var powers = resp["rows"];15                 if(powers.length>0){16                     var showPowers = $("#showPowers").html();17                     for(var i=0;i<powers.length;i++){18                         showPowers += "<li id=‘"+powers[i].sysPowerId+"‘><a href=‘javascript:void(0)‘ onclick=\"loadChildPower(‘"+powers[i].sysPowerId+"‘);\">"+powers[i].sysPowerName+"</a><div  class=‘opt‘><a href=‘javascript:void(0)‘ onclick=\"updatePower(‘"+powers[i].sysPowerId+"‘);\">编辑</a> | <a href=‘javascript:void(0)‘ onclick=\"deletePower(‘"+powers[i].sysPowerId+"‘);\">删除</a> </div></li>";19                     }20                     $("#showPowers").html(showPowers);                    21                 }22             }23         });24     }

第二步：在拼写的页面中，添加操作的请求地址。例如（加载父权限下的子权限，修改，删除操作的url请求后台的地址）

//加载二级权限菜单    function loadChildPower(pId){        if($("#"+pId).find("ul").length==0){            $("#"+pId).append("<ul></ul>");            $.ax({                type: "get",                url: "<%=request.getContextPath()%>/master/sysPower_loadParentPower.action?sysPower.sysParentId="+pId,                async: false,                dateType: "json",                success: function(resp){                    var powers = resp["rows"];                    if(powers.length>0){                        for(var i=0;i<powers.length;i++){                            $("#"+pId).find("ul").append("<li id=‘"+powers[i].sysPowerId+"‘>"+powers[i].sysPowerName+"<div  class=‘opt‘><a href=‘javascript:void(0)‘ onclick=\"updatePower(‘"+powers[i].sysPowerId+"‘);\">编辑</a> | <a href=‘javascript:void(0)‘ onclick=\"deletePower(‘"+powers[i].sysPowerId+"‘);\">删除</a> </div> </li>");                        }                    } else {                        $("#"+pId).find("ul").append("<li>暂无下级权限 <div  class=‘opt‘>无操作</div></li>");                    }                }            });        } else {            //显示\隐藏菜单            if($("#"+pId).find("ul").css("display")=="block"){                $("#"+pId).find("ul").css("display","none");            } else {                $("#"+pId).find("ul").css("display","block");            }        }    }
View Code

第三步：修改和删除权限的js操作

 

//编辑    function updatePower(powerId){        window.open("<%=request.getContextPath()%>/master/sysPower_findPowerById.action?sysPower.sysPowerId="+powerId,"","height=400,width=600,top=200,left=450,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");    }    //删除    function deletePower(powerId){        if(window.confirm("确认删除？"))        $.ax({            type:"get",            url:"<%=request.getContextPath()%>/master/sysPower_deletePower.action?sysPower.sysPowerId="+powerId,            async: false,            //dataType:"json",            success:function(resp){                if(resp==true){                    $("#"+powerId).remove();                }            }        });    }
View Code

 第四步：当是修改权限的时候，向后台发送ajax请求（（会打开一个新的窗口，子页面）），查处该权限的信息，然后回显到新窗口。提交新窗口的form表单修改，响应回一个页面，页面上一个按钮，用来刷新父页面，是修改权限的窗口。

 

//子窗口回显信息的form表单<form action="<%=request.getContextPath() %>/master/sysPower_updatePower.action" method="post">    <div class="formbody">        <div class="formtitle"><span>权限详情</span></div>        <ul class="forminfo">    <input name="sysPower.sysPowerId" type="hidden" class="dfinput" value="http://www.mamicode.com/${sysPower.sysPowerId }" />    <input name="sysPower.sysParentId" type="hidden" class="dfinput" value="http://www.mamicode.com/${sysPower.sysParentId }" />    <li><label>权限名称</label><input name="sysPower.sysPowerName" type="text" class="dfinput" value="http://www.mamicode.com/${sysPower.sysPowerName }" /></li>    <li><label>权限URL</label><input name="sysPower.sysPowerUrl" type="text" class="dfinput" value="http://www.mamicode.com/${sysPower.sysPowerUrl }" /></li>    <li><label>权限排序</label><input name="sysPower.sysSort" type="text" class="dfinput" value="http://www.mamicode.com/${sysPower.sysSort }" /></li>    <li>        <label>&nbsp;</label><input name="" type="submit" class="btn" value="http://www.mamicode.com/提交修改" />    </li>    </ul>            </div>    </form>//提交form表单后，响应回来的页面，有一个按钮，出动js方法，刷新父窗口内容，让父窗口是修改后的显示<script type="text/javascript">        function freshAndClose(){            window.opener.location.reload(true);            setTimeout("window.close()",500);        }        </script>    </head><body>    更新成功<br/>    <input type="button" class="btn" value="http://www.mamicode.com/关闭" onclick="freshAndClose();"/></body>
View Code

 

 

 

 

 

 

 


联系
我们