Ajax实现二级联动下拉框

jiqimiao

浏览: 63307 次
性别:
来自: 常州

最近访客更多访客>>

liaoyang.777

loitry

青火1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

这个一个ajax的经典示例，也是ajax的长处所在。不多说了，下面来看代码。

项目结构图：

index.jsp:

<%@pagelanguage="java"contentType="text/html;charset=utf-8"%>

<html>
<head>
<title>MyJSP'index.jsp'startingpage</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<SCRIPTtype="text/javascript">
varreq;
window.onload=function(){
}

functionChange_Select()
{
varzhi=document.getElementById('hero').value;
varurl="select?id="+escape(zhi);
if(window.XMLHttpRequest)
{
req=newXMLHttpRequest();
}elseif(window.ActiveXObject)
{
req=newActiveXObject("Microsoft.XMLHTTP");
}

if(req)
{
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
}

functioncallback()
{
if(req.readyState==4)
{
if(req.status==200)
{
parseMessage();
}else{
alert("Notabletoretrievedescription"+req.statusText);
}
}
}

functionparseMessage()
{
varxmlDoc=req.responseXML.documentElement;
varxSel=xmlDoc.getElementsByTagName('select');
varselect_root=document.getElementById('skill');
select_root.options.length=0;

for(vari=0;i<xSel.length;i++)
{
varxValue=xSel[i].childNodes[0].firstChild.nodeValue;
varxText=xSel[i].childNodes[1].firstChild.nodeValue;
varoption=newOption(xText,xValue);
try{
select_root.add(option);
}catch(e){
}
}

}
</SCRIPT>
</head>

<body>
<divalign="center">
<formname="form1"method="post"action="">
<TABLEwidth="70%"boder="0"cellspacing="0">
<TR>
<TDalign="center">DoubleSelectBox</TD>
</TR>
<TR>
<TD>
<SELECTname="hero"id="hero"onChange="Change_Select()">
<OPTIONvalue="0">Unbounded</OPTION>
<OPTIONvalue="1">D.K.</OPTION>
<OPTIONvalue="2">NEC.</OPTION>
<OPTIONvalue="3">BOSS</OPTION>
</SELECT>
<SELECTname="skill"id="skill">
<OPTIONvalue="0">Unbounded</OPTION>
</SELECT>
</TD>
</TR>
<TR><td> </td></TR>
</TABLE>
</form>
</div>
</body>
</html>

SelectServlet.java:

packagecom;

importjava.io.IOException;
importjava.io.PrintWriter;

importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;

publicclassSelectServletextendsHttpServlet{

/**
*Constructoroftheobject.
*/
publicSelectServlet(){
super();
}

/**
*Destructionoftheservlet.<br>
*/
publicvoiddestroy(){
super.destroy();//Justputs"destroy"stringinlog
//Putyourcodehere
}

/**
*ThedoGetmethodoftheservlet.<br>
*
*Thismethodiscalledwhenaformhasitstagvaluemethodequalstoget.
*
*@paramrequesttherequestsendbytheclienttotheserver
*@paramresponsetheresponsesendbytheservertotheclient
*@throwsServletExceptionifanerroroccurred
*@throwsIOExceptionifanerroroccurred
*/
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");

StringtargetId=request.getParameter("id").toString();
Stringxml_start="<selects>";
Stringxml_end="</selects>";
Stringxml="";
if(targetId.equalsIgnoreCase("0")){
xml="<select><value>0</value><text>Unbounded</text></select>";
}elseif(targetId.equalsIgnoreCase("1")){
xml="<select><value>1</value><text>ManaBurn</text></select>";
xml+="<select><value>2</value><text>DeathCoil</text></select>";
xml+="<select><value>3</value><text>UnholyAura</text></select>";
xml+="<select><value>4</value><text>UnholyFire</text></select>";
}elseif(targetId.equalsIgnoreCase("2")){
xml="<select><value>1</value><text>Corprxplode</text></select>";
xml+="<select><value>2</value><text>RaiseDead</text></select>";
xml+="<select><value>3</value><text>BrillianceAura</text></select>";
xml+="<select><value>4</value><text>AimAura</text></select>";
}else{
xml="<select><value>1</value><text>RainofChaos</text></select>";
xml+="<select><value>2</value><text>FingerofDeath</text></select>";
xml+="<select><value>3</value><text>Bash</text></select>";
xml+="<select><value>4</value><text>SummonDoom</text></select>";
}
Stringlast_xml=xml_start+xml+xml_end;
response.getWriter().write(last_xml);
}

/**
*ThedoPostmethodoftheservlet.<br>
*
*Thismethodiscalledwhenaformhasitstagvaluemethodequalstopost.
*
*@paramrequesttherequestsendbytheclienttotheserver
*@paramresponsetheresponsesendbytheservertotheclient
*@throwsServletExceptionifanerroroccurred
*@throwsIOExceptionifanerroroccurred
*/
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{

doGet(request,response);
}

/**
*Initializationoftheservlet.<br>
*
*@throwsServletExceptionifanerroroccure
*/
publicvoidinit()throwsServletException{
//Putyourcodehere
}

}

web.xml:

<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SelectServlet</servlet-name>
<servlet-class>com.SelectServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>SelectServlet</servlet-name>
<url-pattern>/select</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

运行结果图：