<class1 className="食品配件">
<class2 className="汉堡包">
<class3 className="麦当劳"></class3>
<class3 className="肯得基"></class3>
<class3 className="罗杰丝"></class3>
</class2>
<class2 className="饮料">
<class3 className="cocacola"></class3>
<class3 className="sprite"></class3>
<class3 className="coffee"></class3>
<class3 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="https://www.jb51.net/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 method="post" action="">
<select 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 onchange="doChange2(this.value)">
<option value="">请选择分类二</option>
</select>
<select>
<option value="">请选择分类三</option>
</select>
</form>
</center></body>
</html>