多级联动下拉列表Ajax方案实现
2008-03-27 22:17
639 查看
首先是生成下拉列表内容的jsp。这个jsp要生成XML文件，根据发来的参数把数据传到ajax异步请求中。XML可以用来传送比较复杂的数据，然后在javascript中进行解析，但下拉列表可以只传某个下拉列表中的数据，用不着很复杂。用jsp生成XML文件要注意，“%><%”等符号要注意非常紧密的排列，以生成出正确的XML文件。下面给出一段伪码。
<%@page contentType="text/xml" pageEncoding="UTF-8"
import="util.searchUtil, entity.*, java.util.*"%><%
request.setCharacterEncoding("UTF-8");
//得到参数并处理，省略之
List reqDataList = getYourDatas(par1, par2…);//假设这里得到你要的数据后
Iterator it = reqDataList.iterator();
//下面生成XML文件内容
out.println("<?xml version="1.0" encoding="UTF-8"?>");
out.println("<XML>");
while(it.hasNext())...{
String item = it.next().toString();
out.println("<opdata>"+item+"</opdata>");
}
out.println("</XML>");
out.close();
%>
然后是有多级下拉列表的页面。基本思路非常直接，在页面loading时调用XMLHttp把第一级列表的数据得到，然后加入到第一级列表控件中。之后在第一级列表有选择的时候，发送新的XMLHttp请求给jsp页面，一般加上第一级列表选择的内容为参数，得到第二级列表的数据，再javascript中解析并加入数据到第二级列表。后面多级思路一样：第N级都是把前N-1级的数据作为参数异步请求，得到数据解析后加入N级下拉列表中。说一下这里常用的几个javascript函数。
1. getElementsByTagName用来从XML文档中得到对应标签的数据，一般为数组
2. getElementById得到HTML文件中控件引用，方便下面对它进行处理
3. sel.options.add(new Option("key", "value"))用这个来加入数据到下拉列表中。参数顺序不记得了，可能有误。
下面给出项目中的HTML代码（有改动）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">...
var req;
function getXMLHttpRequest()...{
if(window.ActiveXObject)...{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)...{
req = new XMLHttpRequest();
}
}
function getGC_Data()...{
if(!req) getXMLHttpRequest();
req.open("post", "XmlData_jj.jsp?ptyName=GC", true);
req.onreadystatechange = gcCallBack;
req.send(null);
}
function gcCallBack()...{
if(req.readyState==4)...{
if(req.status==200)...{
var img = document.getElementById("loading");
img.style.visibility = "hidden";
var doc = req.responseXML;
var opts = doc.getElementsByTagName("opdata");
var sel = document.getElementById("selGC");
sel.options.add(new Option("--请选择--", "--请选择--"));
for(var i=0; i<opts.length; i++)...{
sel.options.add(new Option(opts[i].text, opts[i].text));
}
}
}
}
function getXMData()...{
var sel = document.getElementById("selGC");
if (sel.selectedIndex == 0) return;
if(!req) getXMLHttpRequest();
req.open("post", "XmlData_jj.jsp?ptyName=XM&GC="+
encodeURI(sel.options[sel.selectedIndex].value), true);
req.onreadystatechange=xmCallback;
req.send(null);
}
function xmCallback()...{
if(req && (req.readyState == 4))...{
if(req.status == 200)...{
var doc = req.responseXML;
var opts = doc.getElementsByTagName("opdata");
//clear all dropdownlist below
document.getElementById("selTZ").options.length = 0;
document.getElementById("selTH").options.length = 0;
var sel = document.getElementById("selXM");
sel.options.length = 0;
sel.options.add(new Option("--请选择--", "--请选择--"));
for(var i=0; i<opts.length; i++)...{
sel.options.add(new Option(opts[i].text, opts[i].text));
}
}
}
}
function getTZData()...{
var selGC = document.getElementById("selGC");
var selXM = document.getElementById("selXM");
if (selXM.selectedIndex == 0) return;
if(!req) getXMLHttpRequest();
req.open("post", "XmlData_jj.jsp?ptyName=TZ&GC="+
encodeURI(selGC.options[selGC.selectedIndex].value)+
"&XM="+encodeURI(selXM.options[selXM.selectedIndex].value)
, true);
req.onreadystatechange=tzCallback;
req.send(null);
}
function tzCallback()...{
if(req && (req.readyState == 4))...{
if(req.status == 200)...{
var doc = req.responseXML;
var opts = doc.getElementsByTagName("opdata");
//clear
document.getElementById("selTH").options.length = 0;
var sel = document.getElementById("selTZ");
sel.options.length = 0;
sel.options.add(new Option("--请选择--", "--请选择--"));
for(var i=0; i<opts.length; i++)...{
sel.options.add(new Option(opts[i].text, opts[i].text));
}
}
}
}
function getTHData()...{
var selGC = document.getElementById("selGC");
var selXM = document.getElementById("selXM");
var selTZ = document.getElementById("selTZ");
if (selTZ.selectedIndex == 0) return;
if(!req) getXMLHttpRequest();
req.open("post", "XmlData_jj.jsp?ptyName=TH&GC="+
encodeURI(selGC.options[selGC.selectedIndex].value)+
"&XM="+encodeURI(selXM.options[selXM.selectedIndex].value)+
"&TZ="+encodeURI(selTZ.options[selTZ.selectedIndex].value)
, true);
req.onreadystatechange=thCallback;
req.send(null);
}
function thCallback()...{
if(req && (req.readyState == 4))...{
if(req.status == 200)...{
var doc = req.responseXML;
var opts = doc.getElementsByTagName("opdata");
var sel = document.getElementById("selTH");
sel.options.length = 0;
sel.options.add(new Option("--请选择--", "--请选择--"));
for(var i=0; i<opts.length; i++)...{
sel.options.add(new Option(opts[i].text, opts[i].text));
}
}
}
}
window.onload = getGC_Data;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="StyleSheet" href=".. esourcesmyCss.css" />
<title>查询向导</title>
</head>
<body>
<div class="pageTitle">查询向导</div>
<div>
<form id="form1" method="post" target="_blank" action="jjList.jsp">
<input type="hidden" name="isAllMatch" value="True" />
<table class="layout">
<tr>
<td>Droplist1：</td><td><select id="selGC" name="gc" onchange="getXMData()"></select>
<img id="loading" src=".. esourcesloading.gif"/>
</td>
</tr>
<tr>
<td> Droplist2：</td><td><select id="selXM" name="xm" onchange="getTZData()"></select></td>
</tr>
<tr>
<td> Droplist3:</td><td><select id="selTZ" name="tz" onchange="getTHData()"></select></td>
</tr>
<tr>
<td> Droplist4:</td><td><select id="selTH" name="th"></select></td>
</tr>
</table>
<div style="padding:10px"><button class="Btn1" type="submit">点击查询</button></div>
</form>
</div>
</body>
</html>
这文章编译了N遍，终于知道有什么“关键词”不让发表了。我页面中“得到工程数据”的函数是由拼音和英文缩写成，get_G_C_Data(如果没有下划线，几个大写字母竟然成了过滤的关键字。CSDN应该找人来直接审文章好了，直接用机器作这个事，真是问题多多，都不知道哪个字有问题，程序中的代码都能搞出问题来，无言了。
<%@page contentType="text/xml" pageEncoding="UTF-8"
import="util.searchUtil, entity.*, java.util.*"%><%
request.setCharacterEncoding("UTF-8");
//得到参数并处理，省略之
List reqDataList = getYourDatas(par1, par2…);//假设这里得到你要的数据后
Iterator it = reqDataList.iterator();
//下面生成XML文件内容
out.println("<?xml version="1.0" encoding="UTF-8"?>");
out.println("<XML>");
while(it.hasNext())...{
String item = it.next().toString();
out.println("<opdata>"+item+"</opdata>");
}
out.println("</XML>");
out.close();
%>
然后是有多级下拉列表的页面。基本思路非常直接，在页面loading时调用XMLHttp把第一级列表的数据得到，然后加入到第一级列表控件中。之后在第一级列表有选择的时候，发送新的XMLHttp请求给jsp页面，一般加上第一级列表选择的内容为参数，得到第二级列表的数据，再javascript中解析并加入数据到第二级列表。后面多级思路一样：第N级都是把前N-1级的数据作为参数异步请求，得到数据解析后加入N级下拉列表中。说一下这里常用的几个javascript函数。
1. getElementsByTagName用来从XML文档中得到对应标签的数据，一般为数组
2. getElementById得到HTML文件中控件引用，方便下面对它进行处理
3. sel.options.add(new Option("key", "value"))用这个来加入数据到下拉列表中。参数顺序不记得了，可能有误。
下面给出项目中的HTML代码（有改动）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">...
var req;
function getXMLHttpRequest()...{
if(window.ActiveXObject)...{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)...{
req = new XMLHttpRequest();
}
}
function getGC_Data()...{
if(!req) getXMLHttpRequest();
req.open("post", "XmlData_jj.jsp?ptyName=GC", true);
req.onreadystatechange = gcCallBack;
req.send(null);
}
function gcCallBack()...{
if(req.readyState==4)...{
if(req.status==200)...{
var img = document.getElementById("loading");
img.style.visibility = "hidden";
var doc = req.responseXML;
var opts = doc.getElementsByTagName("opdata");
var sel = document.getElementById("selGC");
sel.options.add(new Option("--请选择--", "--请选择--"));
for(var i=0; i<opts.length; i++)...{
sel.options.add(new Option(opts[i].text, opts[i].text));
}
}
}
}
function getXMData()...{
var sel = document.getElementById("selGC");
if (sel.selectedIndex == 0) return;
if(!req) getXMLHttpRequest();
req.open("post", "XmlData_jj.jsp?ptyName=XM&GC="+
encodeURI(sel.options[sel.selectedIndex].value), true);
req.onreadystatechange=xmCallback;
req.send(null);
}
function xmCallback()...{
if(req && (req.readyState == 4))...{
if(req.status == 200)...{
var doc = req.responseXML;
var opts = doc.getElementsByTagName("opdata");
//clear all dropdownlist below
document.getElementById("selTZ").options.length = 0;
document.getElementById("selTH").options.length = 0;
var sel = document.getElementById("selXM");
sel.options.length = 0;
sel.options.add(new Option("--请选择--", "--请选择--"));
for(var i=0; i<opts.length; i++)...{
sel.options.add(new Option(opts[i].text, opts[i].text));
}
}
}
}
function getTZData()...{
var selGC = document.getElementById("selGC");
var selXM = document.getElementById("selXM");
if (selXM.selectedIndex == 0) return;
if(!req) getXMLHttpRequest();
req.open("post", "XmlData_jj.jsp?ptyName=TZ&GC="+
encodeURI(selGC.options[selGC.selectedIndex].value)+
"&XM="+encodeURI(selXM.options[selXM.selectedIndex].value)
, true);
req.onreadystatechange=tzCallback;
req.send(null);
}
function tzCallback()...{
if(req && (req.readyState == 4))...{
if(req.status == 200)...{
var doc = req.responseXML;
var opts = doc.getElementsByTagName("opdata");
//clear
document.getElementById("selTH").options.length = 0;
var sel = document.getElementById("selTZ");
sel.options.length = 0;
sel.options.add(new Option("--请选择--", "--请选择--"));
for(var i=0; i<opts.length; i++)...{
sel.options.add(new Option(opts[i].text, opts[i].text));
}
}
}
}
function getTHData()...{
var selGC = document.getElementById("selGC");
var selXM = document.getElementById("selXM");
var selTZ = document.getElementById("selTZ");
if (selTZ.selectedIndex == 0) return;
if(!req) getXMLHttpRequest();
req.open("post", "XmlData_jj.jsp?ptyName=TH&GC="+
encodeURI(selGC.options[selGC.selectedIndex].value)+
"&XM="+encodeURI(selXM.options[selXM.selectedIndex].value)+
"&TZ="+encodeURI(selTZ.options[selTZ.selectedIndex].value)
, true);
req.onreadystatechange=thCallback;
req.send(null);
}
function thCallback()...{
if(req && (req.readyState == 4))...{
if(req.status == 200)...{
var doc = req.responseXML;
var opts = doc.getElementsByTagName("opdata");
var sel = document.getElementById("selTH");
sel.options.length = 0;
sel.options.add(new Option("--请选择--", "--请选择--"));
for(var i=0; i<opts.length; i++)...{
sel.options.add(new Option(opts[i].text, opts[i].text));
}
}
}
}
window.onload = getGC_Data;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="StyleSheet" href=".. esourcesmyCss.css" />
<title>查询向导</title>
</head>
<body>
<div class="pageTitle">查询向导</div>
<div>
<form id="form1" method="post" target="_blank" action="jjList.jsp">
<input type="hidden" name="isAllMatch" value="True" />
<table class="layout">
<tr>
<td>Droplist1：</td><td><select id="selGC" name="gc" onchange="getXMData()"></select>
<img id="loading" src=".. esourcesloading.gif"/>
</td>
</tr>
<tr>
<td> Droplist2：</td><td><select id="selXM" name="xm" onchange="getTZData()"></select></td>
</tr>
<tr>
<td> Droplist3:</td><td><select id="selTZ" name="tz" onchange="getTHData()"></select></td>
</tr>
<tr>
<td> Droplist4:</td><td><select id="selTH" name="th"></select></td>
</tr>
</table>
<div style="padding:10px"><button class="Btn1" type="submit">点击查询</button></div>
</form>
</div>
</body>
</html>
这文章编译了N遍，终于知道有什么“关键词”不让发表了。我页面中“得到工程数据”的函数是由拼音和英文缩写成，get_G_C_Data(如果没有下划线，几个大写字母竟然成了过滤的关键字。CSDN应该找人来直接审文章好了，直接用机器作这个事，真是问题多多，都不知道哪个字有问题，程序中的代码都能搞出问题来，无言了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用Ajax实现多级联动下拉列表For JSP（无限级别，JSON传输数据，含全国地区数据库
- 用Ajax.net实现的一个无刷新的多级联动下拉列表框
- 关于省市区的下拉列表联动实现(JS+AJAX)
- jQuery实现多级联动下拉列表查询框
- JSP+AJAX实现下拉列表联动
- AJAX省市区三级联动下拉列表实现 JAVA开发
- AJAX省市区三级联动下拉列表实现 JAVA开发
- MVC 页面实现ajax刷新联动下拉列表
- ajax——实现三级联动下拉列表
- JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）
- JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法（让你真正理解ajax）
- asp.net 用Ajax实现下拉列表联动
- Ajax技术--多级联动下拉列表（$.ajax()）
- yii 下拉列表多级联动 dropDownList 实现
- 用Ajax.net实现的一个无刷新的多级联动下拉列表框
- jQuery实现多级联动下拉列表查询框
- ajax实现下拉列表联动
- ajax实现下拉列表联动
- asp.net 用Ajax实现下拉列表联动