ajax实现动态级联列表框
2007-12-17 15:44
267 查看
这是前台的页面的代码：
<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数据直接以部门值为主键存入数据
库中，再从客户端接收到部门值时，再查询哈希表取得对应的值，然后封装好后添加到要显示的列表框中；
<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数据直接以部门值为主键存入数据
库中，再从客户端接收到部门值时，再查询哈希表取得对应的值，然后封装好后添加到要显示的列表框中；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 动态加载列表框实现级联菜单的效果
- 实现Web页面中级联菜单的设计/实现动态加载列表框/实现自动刷新页面/实现Web页面的局部动态更新/实现自动完成功能
- Ajax实现动态的二级级联菜单
- Struts2.2配置json+ajax实现三级联（任意级联）下拉列表框。
- 根据列表框的改变图象动态变化的AJAX实现例子
- 根据列表框的改变图象动态变化的AJAX实现例子
- jquery实现级联遇到的ajax同步请求、动态DOM元素监听事件
- smarty + ajax 实现二级动态级联菜单
- dom解析xml实现省市区动态级联
- 使用pagination分页插件实现Ajax动态分页
- Ajax技术实现级联菜单项
- 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）
- Ajax实现动态加载组合框的实例代码
- 利用ajax实现页面动态修改
- 用Ajax.net实现的一个无刷新的多级联动下拉列表框
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- Ajax 使用 json 进行数据交互，实现 级联菜单功能
- DWR框架技术实现下拉动态级联
- Echarts通过Ajax实现动态数据加载
- 用Ajax动态加载列表框