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>