级联菜单更新

llflove1988

浏览: 43008 次
性别:
来自: 广州

最近访客更多访客>>

wcluckyguy

weiyuqing1987

wsdzy1992

fzdxwhl2015

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Java Microsoft SQL IE JDBC

index.jsp
Java代码
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="gb2312"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<script language="javascript">
var XMLHttpReq;
    //创建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) {
        sendRequest("menu.jsp?sort=" + obj );
        /**下面这一句的作用是：每次选择后回到第一个选项**/
        // document.all.mli.options[0].selected=true;
    }

</script>
</head>
<body>
<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="select1" style="width:150px">
//下面由于数据库结构不一样，我直接写上的，也可以从数据库中取出
<option value=''>---请选择---</option>
<option value='古遗址'>古遗址</option>
<option value='古墓葬'>古墓葬</option>
<option value='古建筑'>古建筑</option>
<option value='石窟寺及石刻'>石窟寺及石刻</option>
<option value='近现代重要史迹及代表性建筑'>近现代重要史迹及代表性建筑</option>
</select>
<select name="list" onchange="if(this.selectedIndex)alert('您选择的是：'+this.options[this.options.selectedIndex].value)" style="width:100px">
<option name="">---请选择---</option>
</select>
</body>
</html>

<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="gb2312"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<script language="javascript">
var XMLHttpReq;
//创建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) {
sendRequest("menu.jsp?sort=" + obj );
/**下面这一句的作用是：每次选择后回到第一个选项**/
// document.all.mli.options[0].selected=true;
}

</script>
</head>
<body>
<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="select1" style="width:150px">
//下面由于数据库结构不一样，我直接写上的，也可以从数据库中取出
<option value=''>---请选择---</option>
<option value='古遗址'>古遗址</option>
<option value='古墓葬'>古墓葬</option>
<option value='古建筑'>古建筑</option>
<option value='石窟寺及石刻'>石窟寺及石刻</option>
<option value='近现代重要史迹及代表性建筑'>近现代重要史迹及代表性建筑</option>
</select>
<select name="list" onchange="if(this.selectedIndex)alert('您选择的是：'+this.options[this.options.selectedIndex].value)" style="width:100px">
<option name="">---请选择---</option>
</select>
</body>
</html>

menu.jsp:
Java代码
<%@ page contentType="text/html; charset=GB2312" import="java.util.*,java.sql.*" %>
<%
    String sort=new String(request.getParameter("sort").getBytes("iso-8859-1"),"GB2312");
    System.out.print("sort="+sort);
    String dbDriver = "com.microsoft.jdbc.sqlserver.SQLServerDriver"; //连接sql数据库的方法
    String url = "jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=test";
    String userName = "数据库用户名";
    String password = "数据库密码";
    Connection conn = null;
    Statement st = null;
    ResultSet rs = null;
    List lists = new ArrayList();

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

    try {
        conn = DriverManager.getConnection(url,userName,password);
        st=conn.createStatement();
        rs=st.executeQuery("SELECT 要选择的字段 FROM 表名 where 条件='"+sort+"'");
        while (rs.next())
        {
            lists.add(rs.getString(1));
        }
        rs.close();
        st.close();
        conn.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
    response.setContentType("text/xml; charset=gb2312");
    response.setHeader("Cache-Control", "no-cache");
    //必须要写下面这一行，不然取出的XML长度为0
    response.getWriter().write("<?xml   version=\"1.0\"   encoding=\"gb2312\"?>");
    out.println("<response>");
    for(int i=0;i<lists.size();i++)
    {
        out.println("<res>" + lists.get(i).toString() + "</res>");
    }
    out.println("</response>");
%>

<%@ page contentType="text/html; charset=GB2312" import="java.util.*,java.sql.*" %>
<%
    String sort=new String(request.getParameter("sort").getBytes("iso-8859-1"),"GB2312");
    System.out.print("sort="+sort);
    String dbDriver = "com.microsoft.jdbc.sqlserver.SQLServerDriver"; //连接sql数据库的方法
String url = "jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=test";
String userName = "数据库用户名";
String password = "数据库密码";
    Connection conn = null;
    Statement st = null;
    ResultSet rs = null;
    List lists = new ArrayList();

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

    try {
        conn = DriverManager.getConnection(url,userName,password);
        st=conn.createStatement();
        rs=st.executeQuery("SELECT 要选择的字段 FROM 表名 where 条件='"+sort+"'");
        while (rs.next())
        {
            lists.add(rs.getString(1));
        }
        rs.close();
        st.close();
        conn.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
    response.setContentType("text/xml; charset=gb2312");
    response.setHeader("Cache-Control", "no-cache");
    //必须要写下面这一行，不然取出的XML长度为0
    response.getWriter().write("<?xml   version=\"1.0\"   encoding=\"gb2312\"?>");
    out.println("<response>");
    for(int i=0;i<lists.size();i++)
    {
        out.println("<res>" + lists.get(i).toString() + "</res>");
    }
    out.println("</response>");
%>

效果如，选择省份自动更换城市

分享到：