ajax 级联菜单

danan.2007

级联菜单在web项目中经常我们会用到，现在大概有这么2中思路，
用javascript 脚本将要级联的数据做成一个数组，在选择第一级的时候，级联第2级的数据。这种在数据量不大，关系不是很复杂时很管用。
运用Ajax的异步访问。
js部分:
var XMLHttpReq;
   var currentSort;
     //创建XMLHttpRequest对象
    function createXMLHttpRequest() {
        if(window.XMLHttpRequest) { //Mozilla 浏览器
            XMLHttpReq = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) { // IE浏览器
            try {
                XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
    }
    //发送请求函数
    function sendRequest(url) {
        createXMLHttpRequest();
        XMLHttpReq.open("GET", url, true);
        XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
        XMLHttpReq.send(null); // 发送请求
    }
    // 处理返回信息函数
    function processResponse() {
        if (XMLHttpReq.readyState == 4) { // 判断对象状态
            if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
                updateMenu();
            } else { //页面不正常
                  alert(XMLHttpReq.status+"您所请求的页面有异常。");
            }
        }
    }
    //更新菜单函数
    function updateMenu() {
        var res=XMLHttpReq.responseXML.getElementsByTagName("res")
        /**下面是用innerHTML输出控件内容的一般用法**/
        //var subMenu = "";
        //for(var i = 0; i  res.length; i++) {
        // subMenu = subMenu + " " + res.firstChild.data + "";
        //}
        //currentSort.innerHTML = subMenu;
        
        var list = document.all.list;
        list.options.length=0;
        list.add(new Option("---请选择---",""));
        for(var i=0;ires.length;i++){
            list.add(new Option(res.firstChild.data,res.firstChild.data));
        }
    }
    // 创建级联菜单函数
    function showSubMenu(obj) {
        //currentSort =document.getElementById(obj);
        //currentSort.parentNode.style.display = "";
        sendRequest("/LQweb/MenuAjaxServlet?id=" + obj);
        /**下面这一句的作用是：每次选择后回到第一个选项**/
        //document.all.mli.options[0].selected=true;
    }
jsp文件部分：
jsp:useBean id="depts"
       class="com.mei.DataToGetDepts">/jsp:useBean>部门：select
       onchange="showSubMenu(this.options[this.options.selectedIndex].value)"
       name="mli" style="width:150px">
       option value=''>---请选择---/option>
           c:forEach var="item" items="${depts.depts}">
        option value="${item.id}">${item.department }/option>
       /c:forEach>
      /select>
      
      br />
      姓名：select name="list" id="list2" onchange="this.location()"
       style="width:150px">
       option name="">---请选择---/option>
      /select>
servlet部分：
package com.mei;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.hibernate.Session;
import org.hibernate.criterion.Expression;
import com.mei.hibernate.HDept;
import com.mei.hibernate.HUser;
import com.mei.hibernate.HibernateUtil;
/**
* Servlet implementation class for Servlet: MenuAjaxServlet
*
*/
public class MenuAjaxServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
    /**
  *
  */
private static final long serialVersionUID = -3352981617371090766L;
/* (non-Java-doc)
  * @see javax.servlet.http.HttpServlet#HttpServlet()
  */
public MenuAjaxServlet() {
  super();
}

/* (non-Java-doc)
  * @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  process(request,response);
}

/* (non-Java-doc)
  * @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  process(request,response);
}

private void process(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException{
  String str=request.getParameter("id");
  Integer id=new Integer(str);
  HibernateUtil.beginTransaction();
  Session session=HibernateUtil.getSession();
  HDept dept=(HDept) session.load(HDept.class, id);
  List list=session.createCriteria(HUser.class).add(Expression.eq("department",dept)).list();
  Iterator it=list.iterator();
  response.setContentType("text/xml; charset=UTF-8");
     response.setHeader("Cache-Control", "no-cache");
     ServletOutputStream out= response.getOutputStream();
     out.println("");
  while(it.hasNext()){
   HUser user=(HUser)it.next();
   out.println(""+user.getName()+"");
  }
  out.println("");
  out.close();
}
}


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u2/63956/showart_717948.html