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窗口,运行方便 ...
随机推荐
- awk 常用选项及数组的用法和模拟生产环境数据统计
awk 常用选项总结 在 awk 中使用外部的环境变量 (-v) awk -v num2="$num1" -v var1="$var" 'BEGIN{print ...
- 阿里面试官总结40 个 Java 多线程问题
前言 这篇文章主要是对多线程的问题进行总结的,因此罗列了40个多线程的问题. 这些多线程的问题,有些来源于各大网站.有些来源于自己的思考.可能有些问题网上有.可能有些问题对应的答案也有.也可能有些各位 ...
- 服务发现之consul理论整理_结合Docker+nginx+Tomcat简单部署案例
目录 一.理论概述 服务发现的概念简述 consul简述 二.部署docker+consul+Nginx案例 环境 部署 三.测试 四.总结 一.理论概述 服务发现的概念简述 在以前使用的是,N台机器 ...
- 记录一下JProfiler的使用
刚入职实习,第四天了,昨晚老大安排我在公司机器上装个JProfiler看一情况. 然后网上都是什么跟tomcat一起使用的,所以折腾了很久才搞出来. 我这里没用什么服务器,因为公司用的是Play!框架 ...
- 列表推导式中的各个元素的id并不一样
列表推导式中的各个元素在不同的内存中,id不一样 # 列表推导式的不同id值 ----------------------------------------------------- T = [] ...
- ubuntu---记录.动态库默认路径的踩坑
发现这个问题,还是经过一个报错问题卡了好多天,然后请求好多人的支援,最后个人的疑问:为什么明明指明了路径,生成 .SO 没有问题,在调用.SO 就有问题,报错各种找不到函数或者未定义,然后把缺的 *. ...
- ES6中let、const和var的区别
一.let 1.基本用法 ES6 新增了let命令,用来声明变量. let 的用法类似于 var,但所声明的变量只在 let 命令所在的代码块内有效(一个“{}”相当于一个代码块) { let a = ...
- python中函数的定义、返回值以及参数的简要介绍
一. 1.函数 定义:def关键字开头,空格之后接函数名称和圆括号(),后面紧跟‘:”. 函数是对功能的封装 语法: def 函数名(形参列表): 函数体(代码块,return) 调用: 函数名(实参 ...
- P1462 通往奥格瑞玛的道路[最短路+二分+堆优化]
题目来源:洛谷 题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目描 ...
- linux服务器上安装jenkins
nkins常用的有两种安装方式: 1.直接下载war包jenkins.war,下载地址https://jenkins.io/download 直接下载 1.1.可以把war包直接部署到servlet容 ...