体验Struts(4)---用ajax实现三级下拉列表

接着上次的话题，下面的就是学生注册时需要的学院，专业，班级，三层列表，
学院：
<html:select property="instituteId" onchange="getDepartments(this.value)">
     <html:options collection="institutes" property="value" labelProperty="label"/>
    </html:select>
专业：
<html:select property="departmentId" styleId="department" onchange="getClasses(this.value)"></html:select>
班级：
<html:select property="classId" styleId="classid" ></html:select>

学院是上来就应该有的，我们把他放到了LabelValueBean里
public Vector<LabelValueBean> getInstitutes()
    {
        Connection connection = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        try
        {
            connection = getConnection();
            pstmt = connection.prepareStatement( "select * from institute" );
            rs = pstmt.executeQuery();
            Vector<LabelValueBean> institutes = new Vector<LabelValueBean>();
            institutes.add( new LabelValueBean( "请选择所在学院", "" ) );
            while ( rs.next() )
            {
                institutes.add( new LabelValueBean(
                        rs.getString( "institute" ), rs.getString( "id" ) ) );
            }
            return institutes;
        }
        catch ( Exception e )
        {
            e.printStackTrace();
        }
        finally
        {
            close( rs );
            close( pstmt );
            close( connection );
        }
        return null;
    }
而当它选择了一个学院后，相应的getDepartments(this.value)的js脚本就该工作了，还是四步
var xmlHttp;
function createXMLHttpRequest()
{
 if (window.XMLHttpRequest)
 {
  xmlHttp = new XMLHttpRequest();
 }
 else if (window.ActiveXObject)
 {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}
发出请求
function getDepartments(institute)
{
 createXMLHttpRequest()
 var url = "ajax.do?institute="+institute+"&method=getDepartments"
 xmlHttp.open("GET",url, true)
 xmlHttp.onreadystatechange = departments
 xmlHttp.send(null)
}
处理响应
function departments()
{
 if (xmlHttp.readyState == 4)
 {
  if (xmlHttp.status == 200)
  {
   resText = xmlHttp.responseText
   each = resText.split("|")
   buildSelect( each, document.getElementById("departmentId"), "请选择所在专业");
  }
 }
}
function buildSelect(str,sel,label)
{
 sel.options.length=0;
 sel.options[sel.options.length]=new Option(label,"")
 for(var i=0;i<str.length;i++)
 {
  each=str[i].split(",")
  sel.options[sel.options.length]=new Option(each[0],each[1])
 }
}
我把从数据库中得到的各个专业进行了编码，之后再这里再回归回去，下面的是编码过程
public StringBuffer getDepartmentsByInstituteIdForAjax( Long instituteId )
    {
        Connection connection = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        try
        {
            connection = getConnection();
            pstmt = connection
                    .prepareStatement( "select * from department where instituteID=?" );
            pstmt.setLong( 1, instituteId );
            rs = pstmt.executeQuery();
            StringBuffer sb = new StringBuffer();
            while ( rs.next() )
            {
                sb.append( rs.getString( "department" ) + ","
                        + rs.getLong( "id" ) );
                if ( !rs.isLast() ) sb.append( "|" );
            }
            return sb;
        }
        catch ( Exception e )
        {
            e.printStackTrace();
        }
        finally
        {
            close( rs );
            close( pstmt );
            close( connection );
        }
        return null;
    }
当然这些都是由
public ActionForward getDepartments( ActionMapping mapping,
            ActionForm form, HttpServletRequest req, HttpServletResponse res )
            throws Exception
    {
        Service service = getService();
        res.getWriter().write(
                service.getDepartmentsByInstituteIdForAjax(
                        Long.parseLong( req.getParameter( "institute" ) ) )
                        .toString() );
        return null;
    }
来控制

===========班级的再这里
public ActionForward getClasses( ActionMapping mapping, ActionForm form,
            HttpServletRequest req, HttpServletResponse res ) throws Exception
    {
        Service service = getService();
        res.getWriter().write(
                service.getClassesByDepartmentIdForAjax(
                        Long.parseLong( req.getParameter( "department" ) ) )
                        .toString() );
        return null;
    }


public StringBuffer getClassesByDepartmentIdForAjax( Long departmentId )
    {
        Connection connection = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        try
        {
            connection = getConnection();
            pstmt = connection
                    .prepareStatement( "select * from class where departmentID=?" );
            pstmt.setLong( 1, departmentId );
            rs = pstmt.executeQuery();
            StringBuffer sb = new StringBuffer();
            while ( rs.next() )
            {
                sb.append( rs.getString( "class" ) + "," + rs.getLong( "id" ) );
                if ( !rs.isLast() ) sb.append( "|" );
            }
            return sb;
        }
        catch ( Exception e )
        {
            e.printStackTrace();
        }
        finally
        {
            close( rs );
            close( pstmt );
            close( connection );
        }
        return null;
    }

function getClasses(department)
{
 createXMLHttpRequest()
 var url = "ajax.do?department="+department+"&method=getClasses"
 xmlHttp.open("GET",url, true)
 xmlHttp.onreadystatechange = classes
 xmlHttp.send(null)
}

function classes()
{
 if (xmlHttp.readyState == 4)
 {
  if (xmlHttp.status == 200)
  {
   resText = xmlHttp.responseText
   each = resText.split("|")
   buildSelect( each, document.getElementById("classid"), "请选择所在班级");
  }
 }
}