JavaDB+JSP+AJAX实现的级联下拉菜单

灵魂守护者 — Tue, 21 Aug 2007 15:00:00 GMT

最近做的项目中涉及到5，6级的级联菜单，用以前那种纯JavaScript做起来实在是太低效了，页面响应慢得跟286一样。。。于是上网找AJAX实现的级联菜单，找来找去找不到用DB+JSP+AJAX实现的。索性把人家的代码拿来改了改，自己做了一个。
我之所以采用这个代码作为修改的蓝本，是因为这个代码的服务端处理程序返回的是标准的XML序列，客户端的JavaScript通过
var res = XMLHttpReq.responseXML.getElementsByTagName(String)
的方式来解析这个XML序列，再通过类似于
res[i].firstChild.data
的方式遍历这个XML序列，从而找到所要的数据。这样可以实现比较大的数据的AJAX操作，比那些只返回简单String的例子要好得多了！反正我最讨厌手动解析字符串了！
menu.jsp（文件的编码也是UTF-8，我用EmEditor写的，右下角那里可以更改文档的编码格式）

<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
%>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">

head>
<%
    String driver = "org.apache.derby.jdbc.EmbeddedDriver";
    String dbName="/derby/demo/databases/toursdb";
    String connectionURL = "jdbc:derby:" + dbName;
    Connection conn = null;
    Statement st = null;
    ResultSet rs = null;
    List cities = new ArrayList();

    try{
        Class.forName(driver);
    } catch(java.lang.ClassNotFoundException e) {
        e.printStackTrace();
    }

    try {
        conn = DriverManager.getConnection(connectionURL);
        st=conn.createStatement();
        rs=st.executeQuery("SELECT distinct COUNTRY FROM cities order by COUNTRY");
        while (rs.next())
        {
            cities.add(rs.getString(1));
        }
        rs.close();
        st.close();
        conn.close();
    }  catch (Exception e)  {
        e.printStackTrace();
    }
%>
<body>
<script language="javascript">
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("您所请求的页面有异常。");
            }
        }
    }
    //更新菜单函数
    function updateMenu() {
        var res=XMLHttpReq.responseXML.getElementsByTagName("res")
        /**下面是用innerHTML输出控件内容的一般用法**/
        //var subMenu = "";
        //for(var i = 0; i < res.length; i++) {
        //    subMenu = subMenu + "  " + res[i].firstChild.data + "";
        //}
        //currentSort.innerHTML = subMenu;

        var list = document.all.list;
        list.options.length=0;
        list.add(new Option("---请选择---",""));
        for(var i=0;i<res.length;i++){
            list.add(new Option(res[i].firstChild.data,res[i].firstChild.data));
        }
    }
    // 创建级联菜单函数
    function showSubMenu(obj) {
        //currentSort =document.getElementById(obj);
        //currentSort.parentNode.style.display = "";
        sendRequest("menujsp.jsp?sort=" + obj);
        /**下面这一句的作用是：每次选择后回到第一个选项**/
        //document.all.mli.options[0].selected=true;
    }

script>
<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="mli"  style="width:150px">
<option value=''>---请选择---option>
<%
    for(int i=0;i<cities.size();i++)
    {
        out.println(""+cities.get(i)+"'>"+cities.get(i)+"");
    }
%>
select>
<select name="list" onchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)" style="width:100px">
<option name="">---请选择---option>
select>
body>
html>

menujsp.jsp（文档编码格式也是UTF-8）

<%@ page contentType="text/html; charset=UTF-8" import="java.util.*,java.sql.*" %>
<%
    String sort=request.getParameter("sort");
    String driver = "org.apache.derby.jdbc.EmbeddedDriver";
    String dbName="/derby/demo/databases/toursdb";
    String connectionURL = "jdbc:derby:" + dbName;
    Connection conn = null;
    Statement st = null;
    ResultSet rs = null;
    List cities = new ArrayList();

    try{
        Class.forName(driver);
    } catch(java.lang.ClassNotFoundException e) {
        e.printStackTrace();
    }

    try {
        conn = DriverManager.getConnection(connectionURL);
        st=conn.createStatement();
        rs=st.executeQuery("SELECT CITY_NAME FROM cities where COUNTRY='"+sort+"'");
        while (rs.next())
        {
            cities.add(rs.getString(1));
        }
        rs.close();
        st.close();
        conn.close();
    }  catch (Exception e)  {
        e.printStackTrace();
    }
    response.setContentType("text/xml; charset=UTF-8");
    response.setHeader("Cache-Control", "no-cache");
    out.println("");
    for(int i=0;i<cities.size();i++)
    {
        out.println("" + cities.get(i).toString() + "");
    }
    out.println("");
    out.close();
%>

数据库版本是：db-derby-10.3.1.4，可以去www.apache.org下载。
把db-derby-10.3.1.4-bin.zip解压到c:\derby下，用的示例数据库是c:/derby/demo/databases/toursdb，注意路径。
然后把derby下的derby.jar解压到用于启动Tomcat的那个JRE的ext目录下，重启TOMCAT，打开浏览器，访问menu.jsp即可看到效果。

三级联动的效果：

下载本例的JSP代码：ajax_db_jsp_demo.rar
三级联动下拉菜单：three_ajax_select_with_db.zip

灵魂守护者 2007-08-21 23:00 发表评论

BlogJava-专业凝聚实力，成功铸就卓越！-文章分类-AJAX

JavaDB+JSP+AJAX实现的级联下拉菜单