AJAX实现级联下拉框 需要的JAVA类 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.equalsIgnoreCase(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.equalsIgnoreCase(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.equalsIgnoreCase(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 = " 电脑配件 " id = " 1 " > < class2 className = " 内存 " 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 = " 硬盘 " 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 = " 食品配件 " id = " 2 " > < class2 className = " 汉堡包 " id = " 1 " > < class3 id = " 1 " className = " 麦当劳 " ></ class3 > < class3 id = " 2 " className = " 肯得基 " ></ class3 > < class3 id = " 3 " className = " 罗杰丝 " ></ class3 > </ class2 > < class2 className = " 饮料 " 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 充当业务层供ajax调用 <% @ 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(" "); 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(" "); 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 = "" > 请选择分类一 </ 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 = "" > 请选择分类二 </ option > </ select > < select name = " select13 " id = " select13 " > < option value = "" > 请选择分类三 </ option > </ select > </ form > </ center ></ body > </ html >