AJAX实现级联下拉框

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 >