本文介绍了一个使用AJAX实现的动态职员选择系统。通过前端JavaScript与后端Java交互，实现根据所选部门动态加载对应职员的功能。
这是前台的页面的代码：
<html>
<head>
</head>
<script language="javascript" type="text/javascript">...
var xmlHttp;
function createXMLHttpRequest()
...{
if(window.ActiveXObject)
...{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
...{
xmlHttp=new XMLHttpRequest();
}
}
function select_change()
...{
var depart=document.getElementById("depart").value;
if(depart!=null)...{
createXMLHttpRequest();
var url="deal.jsp?depart="+depart;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=showMember;
xmlHttp.send(null);
}
}
function showMember()
...{
if(xmlHttp.readyState==4)
...{
if(xmlHttp.status==200)
...{
var membersData=xmlHttp.responseXML.getElementsByTagName("member");
var membersSelect=document.getElementById("member");
var option=null;
membersSelect.options.length=0;
for(var i=0;i<membersData.length;i++)
...{
var mdisplay=membersData[i].childNodes[0].firstChild.nodeValue;
var mvalue=membersData[i].childNodes[1].firstChild.nodeValue;
var option=new Option(mvalue,mdisplay);
try
...{
membersSelect.appendChild(option);
}
catch(e)
...{
alert(e);
}
}
}
else
...{
alert("您请求的页面有异常！");
}
}
else
...{
}
}
</script>
<body>部门:<select id="depart" onChange="select_change()">
<option value="null">--请选择--</option>
<option value="d1">部门1</option>
<option value="d2">部门2</option>
<option value="d3">部门3</option>
<option value="d4">部门4</option>
</select>
职员:<select id="member" multiple="true" width=20></select>
</body>
</html>
<%@ page language="java" contentType="text/heml;charset=gb2312"%>
<%@ page import="java.util.*" %>
<%
String depart=request.getParameter("depart");
if(depart==null) depart="d1";
StringBuffer sb=new StringBuffer();
sb.append("<member>");
Map map=new HashMap();
String d1="<member><id>1001</id><name>成员一</name></member><member><id>1002</id><name>成员二</name></member>";
String d2="<member><id>1003</id><name>成员三</name></member><member><id>1004</id><name>成员四</name></member>";
String d3="<member><id>1005</id><name>成员五</name></member><member><id>1006</id><name>成员六</name></member>";
String d4="<member><id>1007</id><name>成员七</name></member><member><id>1008</id><name>成员八</name></member>";
map.put("d1",d1);
map.put("d2",d2);
map.put("d3",d3);
map.put("d4",d4);
sb.append(map.get(depart).toString());
sb.append("</member>");
response.setContentType("text/xml");
out.write(sb.toString());
%>
<html> <head> </head> <script language="javascript" type="text/javascript">... var xmlHttp; function createXMLHttpRequest() ...{ if(window.ActiveXObject) ...{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) ...{ xmlHttp=new XMLHttpRequest(); } } function select_change() ...{ var depart=document.getElementById("depart").value; if(depart!=null)...{ createXMLHttpRequest(); var url="deal.jsp?depart="+depart; xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=showMember; xmlHttp.send(null); } } function showMember() ...{ if(xmlHttp.readyState==4) ...{ if(xmlHttp.status==200) ...{ var membersData=xmlHttp.responseXML.getElementsByTagName("member"); var membersSelect=document.getElementById("member"); var option=null; membersSelect.options.length=0; for(var i=0;i<membersData.length;i++) ...{ var mdisplay=membersData[i].childNodes[0].firstChild.nodeValue; var mvalue=membersData[i].childNodes[1].firstChild.nodeValue; var option=new Option(mvalue,mdisplay); try ...{ membersSelect.appendChild(option); } catch(e) ...{ alert(e); } } } else ...{ alert("您请求的页面有异常！"); } } else ...{ } } </script> <body>部门:<select id="depart" onChange="select_change()"><option value="null">--请选择--</option><option value="d1">部门1</option><option value="d2">部门2</option><option value="d3">部门3</option><option value="d4">部门4</option></select>职员:<select id="member" multiple="true" width=20></select> </body></html>
这是后台处理页面的代码：
<%@ page language="java" contentType="text/heml;charset=gb2312"%><%@ page import="java.util.*" %><% String depart=request.getParameter("depart"); if(depart==null) depart="d1"; StringBuffer sb=new StringBuffer(); sb.append("<member>"); Map map=new HashMap(); String d1="<member><id>1001</id><name>成员一</name></member><member><id>1002</id><name>成员二</name></member>"; String d2="<member><id>1003</id><name>成员三</name></member><member><id>1004</id><name>成员四</name></member>"; String d3="<member><id>1005</id><name>成员五</name></member><member><id>1006</id><name>成员六</name></member>"; String d4="<member><id>1007</id><name>成员七</name></member><member><id>1008</id><name>成员八</name></member>"; map.put("d1",d1); map.put("d2",d2); map.put("d3",d3); map.put("d4",d4); sb.append(map.get(depart).toString()); sb.append("</member>"); response.setContentType("text/xml"); out.write(sb.toString());%>
该简单的实例是用一个哈希表模拟了服务器端的数据库。将事先定义好的XML数据直接以部门值为主键存入数据
库中，再从客户端接收到部门值时，再查询哈希表取得对应的值，然后封装好后添加到要显示的列表框中；
扫一扫
1754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
