AJAX实现级联下拉框

AJAX实现级联下拉框


需要的JAVA类
packagecom.ajaxlab.ajax;
importjava.util.ArrayList;
importjava.util.Collection;
importjava.util.Iterator;
importorg.jdom.Document;
importorg.jdom.Element;
importorg.jdom.input.SAXBuilder;
importcom.ajaxlab.ajax.ProductClass;

publicclassClassService...{
privateDocumentdom;
publicClassService()...{
try...{
SAXBuilderbuilder=newSAXBuilder();
this.dom=builder.build(ClassService.class.getResource("product.xml"));
}catch(Exceptione)...{
e.printStackTrace();
}
}
publicProductClass[]getAllClass1()...{
Collectionproducts=newArrayList();
Iteratoriterator=this.dom.getRootElement().getChildren().iterator();
do...{
Elementelement=(Element)iterator.next();
ProductClassproduct=newProductClass(element.getAttributeValue("id"),
element.getAttributeValue("className"));
products.add(product);
}while(iterator.hasNext());
return(ProductClass[])products.toArray(newProductClass[0]);

}

publicProductClass[]getAllClass2ById(Stringclass1Id)...{
Collectionproducts=newArrayList();
ElementclassElement=null;
Iteratoriterator=this.dom.getRootElement().getChildren().iterator();
do...{
Elementelement=(Element)iterator.next();
if(class1Id.equalsIgnoreCase(element.getAttributeValue("id")))...{
classElement=element;
break;
}
}while(iterator.hasNext());

if(classElement!=null)...{
Iteratoriter=classElement.getChildren().iterator();
do...{
Elementelement=(Element)iter.next();
ProductClassproduct=newProductClass(element.getAttributeValue("id"),
element.getAttributeValue("className"));
products.add(product);
}while(iter.hasNext());
return(ProductClass[])products.toArray(newProductClass[0]);
}
else...{
returnnull;
}
}


publicProductClass[]getAllClass3ById(Stringclass1Id,Stringclass2Id)...{
Collectionproducts=newArrayList();
Elementclass1Element=null;
Elementclass2Element=null;

Iteratoriterator=this.dom.getRootElement().getChildren().iterator();
do...{
Elementelement=(Element)iterator.next();
if(class1Id.equalsIgnoreCase(element.getAttributeValue("id")))...{
class1Element=element;
break;
}
}while(iterator.hasNext());

if(class1Element!=null)...{
Iteratoriter=class1Element.getChildren().iterator();
do...{
Elementelement=(Element)iter.next();
if(class2Id.equalsIgnoreCase(element.getAttributeValue("id")))...{
class2Element=element;
break;
}
}while(iter.hasNext());

if(class2Element!=null)...{
Iteratoriter2=class2Element.getChildren().iterator();
do...{
Elementelement=(Element)iter2.next();
ProductClassproduct=newProductClass(element.getAttributeValue("id"),element.getAttributeValue("className"));
products.add(product);
}while(iter2.hasNext());
}
return(ProductClass[])products.toArray(newProductClass[0]);
}
elsereturnnull;
}
}


<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEclassSYSTEM"product.dtd">
<class>
<class1className="电脑配件"id="1">
<class2className="内存"id="1">
<class3id="1"className="kingmax"></class3>
<class3id="2"className="kingston"></class3>
<class3id="3"className="samsung"></class3>
<class3id="4"className="hydadi"></class3>
<class3id="5"className="ibm"></class3>
</class2>
<class2className="硬盘"id="2">
<class3id="6"className="hithait"></class3>
<class3id="7"className="IBM"></class3>
<class3id="8"className="samsung"></class3>
<class3id="9"className="westdata"></class3>
</class2>
</class1>

<class1className="食品配件"id="2">
<class2className="汉堡包"id="1">
<class3id="1"className="麦当劳"></class3>
<class3id="2"className="肯得基"></class3>
<class3id="3"className="罗杰丝"></class3>
</class2>
<class2className="饮料"id="2">
<class3id="4"className="cocacola"></class3>
<class3id="5"className="sprite"></class3>
<class3id="6"className="coffee"></class3>
<class3id="7"className="water"></class3>
</class2>
</class1>
</class>


<?xmlversion="1.0"encoding="GB2312"?>
<!ELEMENTclass(class1+)>
<!ELEMENTclass1(class2+)>
<!ATTLISTclass1classNameNMTOKEN#REQUIRED>
<!ATTLISTclass1idNMTOKEN#REQUIRED>
<!ELEMENTclass2(class3+)>
<!ATTLISTclass2classNameNMTOKEN#REQUIRED>
<!ATTLISTclass2idNMTOKEN#REQUIRED>
<!ELEMENTclass3EMPTY>
<!ATTLISTclass3classNameNMTOKEN#REQUIRED>
<!ATTLISTclass3idNMTOKEN#REQUIRED>

JSP:
(1)getClass.jsp充当业务层供ajax调用
<%@pagecontentType="text/html;charset=gb2312"%>
<%@pageimport="com.ajaxlab.ajax.*"%>
<%
Stringclass1Id=request.getParameter("class1Id");
Stringclass2Id=request.getParameter("class2Id");
if("".equals(class1Id))class1Id=null;
if("".equals(class2Id))class2Id=null;
ClassServiceservice=newClassService();
if((class1Id!=null)&&(class2Id==null))...{
ProductClass[]classes=service.getAllClass2ById(class1Id);
if(classes!=null)...{
for(inti=0;i<classes.length;i++)...{
out.print(classes[i].getId()+","+classes[i].getClassName()+"|");
}
}
}
elseif((class1Id!=null)&&(class1Id!=null))...{
ProductClass[]classes=service.getAllClass3ById(class1Id,class2Id);
if(classes!=null)...{
for(inti=0;i<classes.length;i++)...{
out.print(classes[i].getId()+","+classes[i].getClassName()+"|");
}
}
}
%>

(2)divmenu.jsp
<%@pagecontentType="text/html;charset=gb2312"%>
<%@pageimport="com.ajaxlab.ajax.*"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<scripttype="text/javascript"src="ajax_func.js"></script>
<scripttype="text/javascript">

functiondoChange()...{
varf=document.forms[0];
send_request("GET","getClass.jsp?class1Id="+f.select11.value+"&class2Id=",null,"TEXT",populateClass2);
}
functiondoChange2()...{
varf=document.forms[0];
send_request("GET","getClass.jsp?class1Id="+f.select11.value+"&class2Id="+f.select12.value,null,"TEXT",populateClass3);
}
functionpopulateClass2()...{
varf=document.forms[0];
if(http_request.readystate==4)...{
if(http_request.status==200)...{
varlist=http_request.responseText;
varclassList=list.split("|");
f.select12.options.length=1;
for(vari=0;i<classList.length-1;i++)...{
vartemp=Trim(classList[i]).split(",");
f.select12.add(newOption(temp[1],temp[0]));
}
}
}
}

functionpopulateClass3()...{
varf=document.forms[0];
if(http_request.readystate==4)...{
if(http_request.status==200)...{
varlist=http_request.responseText;
varclassList=list.split("|");
f.select13.options.length=1;
for(vari=0;i<classList.length-1;i++)...{
vartemp=Trim(classList[i]).split(",");
f.select13.add(newOption(temp[1],temp[0]));
}
}
}
}
functionLTrim(str)
...{
varwhitespace=newString(" ");
vars=newString(str);
if(whitespace.indexOf(s.charAt(0))!=-1)
...{
varj=0,i=s.length;
while(j<i&&whitespace.indexOf(s.charAt(j))!=-1)
...{
j++;
}
s=s.substring(j,i);
}
returns;
}
functionRTrim(str)
...{
varwhitespace=newString(" ");
vars=newString(str);
if(whitespace.indexOf(s.charAt(s.length-1))!=-1)
...{
vari=s.length-1;
while(i>=0&&whitespace.indexOf(s.charAt(i))!=-1)
...{
i--;
}
s=s.substring(0,i+1);
}
returns;
}
functionTrim(str)
...{
returnRTrim(LTrim(str));
}
</script>
<%
ClassServiceservice=newClassService();
ProductClass[]classes=service.getAllClass1();
%>
<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
<title>Inserttitlehere</title>
</head>
<body><center>
<formname="classForm"method="post"action="">
<selectname="select11"id="select11"onchange="doChange(this.value)">
<optionvalue="">请选择分类一</option>
<%
for(inti=0;i<classes.length;i++)...{
out.println("<optionvalue='"+classes[i].getId()+"'>"+classes[i].getClassName()+"</option>");
}
%>
</select>

<selectname="select12"id="select12"onchange="doChange2(this.value)">
<optionvalue="">请选择分类二</option>
</select>

<selectname="select13"id="select13">
<optionvalue="">请选择分类三</option>
</select>
</form>
</center></body>
</html>