javaScript(拼写树形)+ajax请求,去后台查找数据
第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容
//页面初始化加载菜单内容
$(document).ready(function(){
loadPower(0);
}); //加载一级权限菜单
function loadPower(pId){
$.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){
var showPowers = $("#showPowers").html();
for(var i=0;i<powers.length;i++){
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>";
}
$("#showPowers").html(showPowers);
}
}
});
}
第二步:在拼写的页面中,添加操作的请求地址。例如(加载父权限下的子权限,修改,删除操作的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");
}
}
}
第三步:修改和删除权限的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();
}
}
});
}
第四步:当是修改权限的时候,向后台发送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> </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>
javaScript(拼写树形)+ajax请求,去后台查找数据的更多相关文章
- Jquery progressbar通过Ajax请求获取后台进度演示
项目源代码下载:http://download.csdn.net/detail/nuptboyzhb/6262253 1.简介 本文主要演示Jquery progressbar的进度条功能.js通过a ...
- 解决ajax请求(SpringMVC后台)响应415/400/405错误
解决ajax请求(SpringMVC后台)响应415/400/405错误 后端代码 bean public class user { private String username; private ...
- 前端javascript发送ajax请求、后台书写function小案例
HTML端页面: <td> <input class="pp_text" type="text" name="" valu ...
- jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo
一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...
- JQuery AJAX请求aspx后台方法
利用JQuery封装好的AJAX来请求aspx的后台方法,还是比较方便的,但是要注意以下几点: 1.首先要在方法的顶部加上[WenMethod]的特性(此特性要引入using System.Web.S ...
- 发送Ajax请求获取JSON格式数据
Aspx前端页面: <script type="text/javascript"> $(function () { $.getJSON("Ajax/TestA ...
- Ajax请求ashx返回各类数据的常见处理方式
.请求text数据,在success事件中手动解析 前台: $.ajax({ type: "post", url: "checkFile.ashx", data ...
- 8.ajax与django后台json数据的交互
1新建django项目名为json_ajax,应用名为app,在templates模板中新建ajax.html文件 ajax.html <!DOCTYPE html> <html l ...
- Jquery通过ajax请求NodeJS返回json数据
最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便 ...
随机推荐
- 现在记录几款好用的vscode的插件
vscode 插件 Rainbow Brackets编码过程中,尤其在我们使用js进行函数式编程时,代码里会有很多的花括号,想要保证它们对称十分困难,所以就出现了上面小粉同学的尴尬局面,相信很多人都遇 ...
- 解析CentOS 7中系统文件与目录管理
Linux目录结构 Linux目录结构是树形的目录结构 根目录 所有分区.目录.文件等的位置起点 整个树形目录结构中,使用独立的一个"/"表示 常见的子目录 目录 目录名称 目录 ...
- PAT_B1013
这道题就是一道打印素数表的题目,本人使用的是筛选法,用bool数组记录是否为素数,每一次筛掉本轮数字的倍数,如果当前数字bool数组对应位置为false,则为素数. 这道题的坑是:你不知道最大第100 ...
- Java对象内存分配原理与布局
当一个对象被创建了,那在JVM中是如何的从一个对象不存在到存到,然后将对象存放在什么地方呢?这次主要来探讨一下Java对象创建的过程. new关键字创建对象的3个步骤: 1.在堆内存中创建出对象的实例 ...
- Linux网络编程综合运用之MiniFtp实现(七)
上节中实现了配置文件的解析,这节来实现用户登录的验证,首先用客户端来登录vsftpd来演示登录的过程: 接着再连接miniftpd,来看下目前的效果: 接下来实现它,与协议相关的模块都是在ftppro ...
- m_strcpy
自己实现strcpy函数 #include <stdio.h> #include <assert.h> //如果它的条件返回错误,则终止程序执行 char *m_strcpy( ...
- java继承(implements与extends)总结
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/weixin_39938767/article/details/80056922 关键字impl ...
- 除了不要 SELECT * ,程序员使用数据库还应知道的11个技巧
SQL:sum里加条件SELECT SUM( CASE WHEN "V7010" BETWEEN 0 AND 0.1 THEN 1 ELSE 0 END) FROM "C ...
- Selenium常用API的使用java语言之9-模拟键盘操作
Keys()类提供了键盘上几乎所有按键的方法. 前面了解到, sendKeys()方法可以用来模拟键盘输入, 除此之 外, 我们还可以用它来输入键盘上的按键, 甚至是组合键, 如 Ctrl+A. Ct ...
- git忽略.idea文件
只需要在.gitignore文件增加.idea如果你已经推送到远程仓库,那需要执行git rm -r --cached .idea去掉已经托管的文件