JSP+AJAX三级级联及更多级的实现。。正在进行中

最新推荐文章于 2024-09-12 10:00:34 发布

spirit_fly

最新推荐文章于 2024-09-12 10:00:34 发布

阅读量631

点赞数

分类专栏： JSP 文章标签： ajax jsp xmlhttprequest string function sqlserver

本文链接：https://blog.csdn.net/spirit_fly/article/details/3617492

版权

JSP 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用网上的一个例子，结合自已的实践，还没有做出来，先放在这里，慢慢的改进~~原来网页的链接没看到了~~

第一个页面：menu.jsp
<%@ 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">

<title>级联菜单</title>
</head>
<%

    //连接到数据库，并且得到一个List，作为第一个select控件的数据源


    String CLASSNANE = "com.microsoft.jdbc.sqlserver.SQLServerDriver";
    String URL = "jdbc:microsoft:sqlserver://localhost:1433;databasename=数据库名";
    String USER = "sa";
    String PASSWORD = "";


    Connection conn = null;
    Statement st = null;
    ResultSet rs = null;
    List college = new ArrayList();

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

    try {
        conn = DriverManager.getConnection(URL,USER,PASSWORD);
        st=conn.createStatement();

        String sql = "select sname from 表名";
        rs=st.executeQuery(sql);
        while (rs.next())
        {
            college.add(rs.getString(1));
        }
        rs.close();
        st.close();
        conn.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
%>
<body>
<script language="javascript">
var XMLHttpReq;//这个例子里面只用到一个XMLHttpRequest对象，用于获取服务端返回的XML序列
     //创建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 sendRequest1(url) {
        createXMLHttpRequest();
        XMLHttpReq.open("GET", url, true);
        XMLHttpReq.onreadystatechange = processResponse1;//指定响应函数
        XMLHttpReq.send(null); // 发送请求
    }
    // 处理返回信息函数
    function processResponse1() {
        if (XMLHttpReq.readyState == 4) { // 判断对象状态
            if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
                updateList1();
            } else { //页面不正常
                  alert("您所请求的页面有异常。");
            }
        }
    }
    //更新菜单函数
    function updateList1() {
        var country=XMLHttpReq.responseXML.getElementsByTagName("major");
        var list = document.all.list1;
        for(var i=0;i<country.length;i++){
            list.add(new Option(country[i].firstChild.data,country[i].firstChild.data));
        }
    }

    //发送请求函数
    function sendRequest2(url) {
        createXMLHttpRequest();
        XMLHttpReq.open("GET", url, true);
        XMLHttpReq.onreadystatechange = processResponse2;//指定响应函数
        XMLHttpReq.send(null); // 发送请求
    }
    // 处理返回信息函数
    function processResponse2() {
        if (XMLHttpReq.readyState == 4) { // 判断对象状态
            if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
                updateList2();
            } else { //页面不正常
                  alert("您所请求的页面有异常。");
            }
        }
    }

    function updateList2() {
        var city=XMLHttpReq.responseXML.getElementsByTagName("classname");
           var list = document.all.list2;
        for(var i=0;i<city.length;i++){
            list.add(new Option(city[i].firstChild.data,city[i].firstChild.data));
        }
    }
    // 创建级联菜单函数
    function showList1(obj) {
        clearList1();
        clearList2();
        sendRequest1("menujsp.jsp?college=" + obj);
    }
    function showList2(obj) {
        clearList2();
        sendRequest2("menujsp.jsp?classname="+obj);
    }

    function clearList1()
    {
        var list = document.all.list1;
        list.options.length=0;
        list.add(new Option("---请选择---",""));
    }

    function clearList2()
    {
        var list = document.all.list2;
        list.options.length=0;
        list.add(new Option("---请选择---",""));
    }

</script>
<select οnchange="showList1(this.options[this.options.selectedIndex].value)" name="collegeselect" style="width:150px">
<option value=''>---请选择---</option>
<%
    for(int i=0;i<college.size();i++)
    {
        out.println("<option value='"+college.get(i)+"'>"+college.get(i)+"</option>");
    }
%>
</select>
<select name="list1" οnchange="showList2(this.options[this.options.selectedIndex].value)" style="width:150px">
<option name="">---请选择---</option>
</select>
<select name="list2" οnchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)" style="width:150px">
<option name="">---请选择---</option>
</select>
</body>
</html>

第二个页面，用来接受请求：
menujsp.jsp

<%@ page contentType="text/html; charset=UTF-8" import="java.util.*,java.sql.*" %>
<%
    String college=request.getParameter("college");
    String classname = request.getParameter("classname");
    college = new String(college.getBytes("ISO-8859-1"),"GBK");
    System.out.println("学院"+college);


    String CLASSNANE = "com.microsoft.jdbc.sqlserver.SQLServerDriver";
    String URL = "jdbc:microsoft:sqlserver://localhost:1433;databasename=数据库名";
    String USER = "sa";
    String PASSWORD = "";


    Connection conn = null;
    Statement st = null;
    ResultSet rs = null;
    List major = new ArrayList();
    List classes = new ArrayList();

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

    try {
        conn = DriverManager.getConnection(URL,USER,PASSWORD);
        st=conn.createStatement();
        if(college != null)
        {
        String sql = "select mname from tb_major m inner join (select * from tb_school where sname='"
            + college + "')" + " e on m.msid=e.sid";
            System.out.println(sql);
            rs=st.executeQuery(sql);
            while (rs.next())
            {
                major.add(rs.getString(1));
            }
        }
        if(classname != null)
        {
//这里做的是一个内联接查询
        String sql2 = "select mname from tb_major m inner join (select * from tb_school where sname='"
            + classname + "')" + " e on m.msid=e.sid";
            System.out.println(sql2);

            rs=st.executeQuery(sql2);
            while (rs.next())
            {
                classes.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("<response>");
    for(int i=0;i<major.size();i++)
    {
        out.println("<major>" + major.get(i).toString() + "</major>");
    }
    for(int i=0;i<classes.size();i++)
    {
        out.println("<classname>" + classes.get(i).toString() + "</classname>");
    }
    out.println("</response>");
    out.flush();
%>

从网上参考时遇到的问题：
1.编码的问题，虽然页面上都是UTF-8，但是转过来的是GBK
用上一句
college = new String(college.getBytes("ISO-8859-1"),"GBK");
得以解决，但因为还没看AJAX,所以还搞不清楚，先实现吧
2.参数传值的问题。第一个下拉框选中之后，第二个下拉框出现内容，但是在第二个下拉框选中内容之后，
参数值传不过去，是传值的问题，还是其它，，还在研究中....晕~~