javaScript(拼写树形)+ajax请求,去后台查找数据-阿里云开发者社区

开发者社区> 无信不立> 正文

javaScript(拼写树形)+ajax请求,去后台查找数据

简介: 第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容 1 //页面初始化加载菜单内容 2 $(document).
+关注继续查看

第一步:页面加载完成时,利用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="${sysPower.sysPowerId }" />
    <input name="sysPower.sysParentId" type="hidden" class="dfinput" value="${sysPower.sysParentId }" />
    <li><label>权限名称</label><input name="sysPower.sysPowerName" type="text" class="dfinput" value="${sysPower.sysPowerName }" /></li>
    <li><label>权限URL</label><input name="sysPower.sysPowerUrl" type="text" class="dfinput" value="${sysPower.sysPowerUrl }" /></li>
    <li><label>权限排序</label><input name="sysPower.sysSort" type="text" class="dfinput" value="${sysPower.sysSort }" /></li>
    <li>
        <label>&nbsp;</label><input name="" type="submit" class="btn" value="提交修改" />
    </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="关闭" onclick="freshAndClose();"/>

</body>
View Code

 

 

 

 

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ajax请求后台,返回json格式数据,模板!
添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术。将返回的json格式数据,添加到select标签下。           //加载出部门的信息            function loadGroup(){                            $.
923 0
【spring 注解 错误】使用controller 作为后台给前台ajax交互数据出错
controller作为后台与前台的ajax进行交互,后台的方法处理完成返回一个boolean类型的值,想传给前台用来判断是否执行成功,BUT,问题来了: 1 严重: Servlet.service() for servlet rest threw exception 2 java.
703 0
【VS调试】C#读写Windows 7注册表时抛出“不允许所请求的注册表访问权”的解决办法
原文:【VS调试】C#读写Windows 7注册表时抛出“不允许所请求的注册表访问权”的解决办法 项目 - 属性 - 安全性,“使用ClickOnce”,修改app.mainfest,再取消“使用ClickOnce” 【另有一篇参考文章:http://blog.
1127 0
MVC项目开发中那些用到的知识点(Jquery ajax提交Json后台处理)
前言   jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验!  调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化;   如果提交...
903 0
不用AJAX实现前台JS调用后台C#方法(小技巧)
纯属小技巧,高手见笑了。一提到如何在前台JS调用后台C#方法,AJAX成为了必然的想法。只是实现的细节采用AJAX 1.0或者AjaxPro的区别。其实如果不用AJAX,我们也能够很方便地利用JS调用后台方法。
774 0
用Java写数据到POST请求
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/8053616 用Java写数据到POST请求 HTTP POST请求最常见的用途是发送表单参数到服务器。
595 0
+关注
无信不立
人无信不立,业不勤不精
595
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载