📄 sample2_1.jsp
字号:
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX 级联菜单</title>
<script language="javascript">
//Start：：：1111111111111111111111
function send_request(url,employee) {//初始化、指定处理函数、发送请求的函数
var http_request = false;
//1.开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
//2.等待处理，返回的信息
http_request.onreadystatechange = function() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
//alert(http_request.responseText);
document.getElementById(employee).innerHTML = http_request.responseText;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//3.确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
//初始化页面，并且返回将要转向的目标页面的url
function pageInit(employee){
//1.隐藏用户端，没有点击的菜单选项。
if("manager"==employee){
document.getElementById("engineer").parentNode.style.display="none";
}else{
document.getElementById("manager").parentNode.style.display="none";
}
//2.被用户端点击的菜单选项，处于可见状态
document.getElementById(employee).parentNode.style.display = "";
document.getElementById(employee).innerHTML = "正在读取数据..."
//3.目标页面的url
var url = "sample2_2.jsp?employee="+employee;
return url;
}
//biz logic。显示部门下的岗位
function showRoles(employee) {
var url = pageInit(employee);
send_request(url,employee);
}
//End：：：1111111111111111111111
</script>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20"><a href="javascript:void(0)" onClick="showRoles('manager')">经理室</a></td>
</tr>
<tr style="display:none">
<td height="20" id="manager"> </td>
</tr>
<tr>
<td height="20"><a href="javascript:void(0)" onClick="showRoles('engineer')">开发部</a></td>
</tr>
<tr style="display:none">
<td id="engineer" height="20"> </td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -