Simple implementation case of AJAX cascade drop-down box

Required JAVA class
Copy codeThe Code is as follows:
Package com. ajaxlab. ajax;
Import java. util. ArrayList;
Import java. util. Collection;
Import java. util. Iterator;
Import org. jdom. Document;
Import org. jdom. Element;
Import org. jdom. input. SAXBuilder;
Import com. ajaxlab. ajax. ProductClass;

Public class ClassService {
Private Document dom;
Public ClassService (){
Try {
SAXBuilder builder = new SAXBuilder ();
This. dom = builder. build (ClassService. class. getResource ("product. xml "));
} Catch (Exception e ){
E. printStackTrace ();
}
}
Public ProductClass [] getAllClass1 (){
Collection products = new ArrayList ();
Iterator iterator = this. dom. getRootElement (). getChildren (). iterator ();
Do {
Element element = (Element) iterator. next ();
ProductClass product = new ProductClass (element. getAttributeValue ("id "),
Element. getAttributeValue ("className "));
Products. add (product );
} While (iterator. hasNext ());
Return (ProductClass []) products. toArray (new ProductClass [0]);

}

Public ProductClass [] getAllClass2ById (String class1Id ){
Collection products = new ArrayList ();
Element classElement = null;
Iterator iterator = this. dom. getRootElement (). getChildren (). iterator ();
Do {
Element element = (Element) iterator. next ();
If (class1Id. inclusignorecase (element. getAttributeValue ("id "))){
ClassElement = element;
Break;
}
} While (iterator. hasNext ());

If (classElement! = Null ){
Iterator iter = classElement. getChildren (). iterator ();
Do {
Element element = (Element) iter. next ();
ProductClass product = new ProductClass (element. getAttributeValue ("id "),
Element. getAttributeValue ("className "));
Products. add (product );
} While (iter. hasNext ());
Return (ProductClass []) products. toArray (new ProductClass [0]);
}
Else {
Return null;
}
}


Public ProductClass [] getAllClass3ById (String class1Id, String class2Id ){
Collection products = new ArrayList ();
Element class1Element = null;
Element class2Element = null;

Iterator iterator = this. dom. getRootElement (). getChildren (). iterator ();
Do {
Element element = (Element) iterator. next ();
If (class1Id. inclusignorecase (element. getAttributeValue ("id "))){
Class1Element = element;
Break;
}
} While (iterator. hasNext ());

If (class1Element! = Null ){
Iterator iter = class1Element. getChildren (). iterator ();
Do {
Element element = (Element) iter. next ();
If (class2Id. inclusignorecase (element. getAttributeValue ("id "))){
Class2Element = element;
Break;
}
} While (iter. hasNext ());

If (class2Element! = Null ){
Iterator iter2 = class2Element. getChildren (). iterator ();
Do {
Element element = (Element) iter2.next ();
ProductClass product = new ProductClass (element. getAttributeValue ("id"), element. getAttributeValue ("className "));
Products. add (product );
} While (iter2.hasNext ());
}
Return (ProductClass []) products. toArray (new ProductClass [0]);
}
Else return null;
}
}

<? Xml version = "1.0" encoding = "UTF-8"?>
<! DOCTYPE class SYSTEM "product. dtd">
<Class>
<Class1 className = "computer accessories" id = "1">
<Class2 className = "Memory" id = "1">
<Class3 id = "1" className = "kingmax"> </class3>
<Class3 id = "2" className = "kingston"> </class3>
<Class3 id = "3" className = "samsung"> </class3>
<Class3 id = "4" className = "hydadi"> </class3>
<Class3 id = "5" className = "ibm"> </class3>
</Class2>
<Class2 className = "Hard Disk" id = "2">
<Class3 id = "6" className = "hithait"> </class3>
<Class3 id = "7" className = "IBM"> </class3>
<Class3 id = "8" className = "samsung"> </class3>
<Class3 id = "9" className = "westdata"> </class3>
</Class2>
</Class1>

<Class1 className = "Food accessories" id = "2">
<Class2 className = "hamburger" id = "1">
<Class3 id = "1" className = "McDonald's"> </class3>
<Class3 id = "2" className = "kendeji"> </class3>
<Class3 id = "3" className = "rock"> </class3>
</Class2>
<Class2 className = "beverage" id = "2">
<Class3 id = "4" className = "cocacola"> </class3>
<Class3 id = "5" className = "sprite"> </class3>
<Class3 id = "6" className = "coffee"> </class3>
<Class3 id = "7" className = "water"> </class3>
</Class2>
</Class1>
</Class>

<? Xml version = "1.0" encoding = "GB2312"?>
<! ELEMENT class (class1 +)>
<! ELEMENT class1 (class2 +)>
<! ATTLIST class1 className NMTOKEN # REQUIRED>
<! ATTLIST class1 id NMTOKEN # REQUIRED>
<! ELEMENT class2 (class3 +)>
<! ATTLIST class2 className NMTOKEN # REQUIRED>
<! ATTLIST class2 id NMTOKEN # REQUIRED>
<! ELEMENT class3 EMPTY>
<! ATTLIST class3 className NMTOKEN # REQUIRED>
<! ATTLIST class3 id NMTOKEN # REQUIRED>

JSP:
(1) getClass. jsp acts as the business layer for ajax to call
<% @ Page contentType = "text/html; charset = gb2312" %>
<% @ Page import = "com. ajaxlab. ajax. *" %>
<%
String class1Id = request. getParameter ("class1Id ");
String class2Id = request. getParameter ("class2Id ");
If ("". equals (class1Id) class1Id = null;
If ("". equals (class2Id) class2Id = null;
ClassService service = new ClassService ();
If (class1Id! = Null) & (class2Id = null )){
ProductClass [] classes = service. getAllClass2ById (class1Id );
If (classes! = Null ){
For (int I = 0; I <classes. length; I ++ ){
Out. print (classes [I]. getId () + "," + classes [I]. getClassName () + "| ");
}
}
}
Else if (class1Id! = Null) & (class1Id! = Null )){
ProductClass [] classes = service. getAllClass3ById (class1Id, class2Id );
If (classes! = Null ){
For (int I = 0; I <classes. length; I ++ ){
Out. print (classes [I]. getId () + "," + classes [I]. getClassName () + "| ");
}
}
}
%>

(2) divmenu. jsp
<% @ Page contentType = "text/html; charset = gb2312" %>
<% @ Page import = "com. ajaxlab. ajax. *" %>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Script type = "text/javascript" src = "ajax_func.js"> </script>
<Script type = "text/javascript">

Function doChange (){
Var f = document. forms [0];
Send_request ("GET", "getClass. jsp? Class1Id = "+ f. select11.value +" & class2Id = ", null," TEXT ", populateClass2 );
}
Function doChange2 (){
Var f = document. forms [0];
Send_request ("GET", "getClass. jsp? Class1Id = "+ f. select11.value +" & class2Id = "+ f. select12.value, null," TEXT ", populateClass3 );
}
Function populateClass2 (){
Var f = document. forms [0];
If (http_request.readystate = 4 ){
If (http_request.status = 200 ){
Var list = http_request.responseText;
Var classList = list. split ("| ");
F. select12.options. length = 1;
For (var I = 0; I <classList. length-1; I ++ ){
Var temp = Trim (classList [I]). split (",");
F. select12.add (new Option (temp [1], temp [0]);
}
}
}
}

Function populateClass3 (){
Var f = document. forms [0];
If (http_request.readystate = 4 ){
If (http_request.status = 200 ){
Var list = http_request.responseText;
Var classList = list. split ("| ");
F. select13.options. length = 1;
For (var I = 0; I <classList. length-1; I ++ ){
Var temp = Trim (classList [I]). split (",");
F. select13.add (new Option (temp [1], temp [0]);
}
}
}
}
Function LTrim (str)
{
Var whitespace = new String ("/t/n/r ");
Var s = new String (str );
If (whitespace. indexOf (s. charAt (0 ))! =-1)
{
Var j = 0, I = s. length;
While (j <I & whitespace. indexOf (s. charAt (j ))! =-1)
{
J ++;
}
S = s. substring (j, I );
}
Return s;
}
Function RTrim (str)
{
Var whitespace = new String ("/t/n/r ");
Var s = new String (str );
If (whitespace. indexOf (s. charAt (s. length-1 ))! =-1)
{
Var I = s. length-1;
While (I> = 0 & whitespace. indexOf (s. charAt (I ))! =-1)
{
I --;
}
S = s. substring (0, I + 1 );
}
Return s;
}
Function Trim (str)
{
Return RTrim (LTrim (str ));
}
</Script>
<%
ClassService service = new ClassService ();
ProductClass [] classes = service. getAllClass1 ();
%>
<Meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1">
<Title> Insert title here </title>
</Head>
<Body> <center>
<Form name = "classForm" method = "post" action = "">
<Select name = "select11" id = "select11" onchange = "doChange (this. value)">
<Option value = ""> select category 1 </option>
<%
For (int I = 0; I <classes. length; I ++ ){
Out. println ("<option value = '" + classes [I]. getId () + "'>" + classes [I]. getClassName () + "</option> ");
}
%>
</Select>

<Select name = "select12" id = "select12" onchange = "doChange2 (this. value)">
<Option value = ""> select category 2 </option>
</Select>

<Select name = "select13" id = "select13">
<Option value = ""> select category 3 </option>
</Select>
</Form>
</Center> </body>
</Html>