ajax二级联下拉菜单

最新推荐文章于 2024-11-07 01:22:08 发布

xiwu

最新推荐文章于 2024-11-07 01:22:08 发布

阅读量689

点赞数

分类专栏： JS 文章标签： ajax xmlhttprequest function exception derby string

本文链接：https://blog.csdn.net/xiwu1616/article/details/7541978

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<%for(int i=0;i

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">
<!--LINK href="images/css.css" type=text/css rel=stylesheet-->
</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 οnchange="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("<option value='"+cities.get(i)+"'>"+cities.get(i)+"</option>");
	}
%>
</select>
<select name="list" οnchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)" style="width:100px">
<option name="">---请选择---</option>
</select>
</body>
</html>

menujs.jsp

<%@ 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("<response>");
	for(int i=0;i<cities.size();i++)
	{
		out.println("<res>" + cities.get(i).toString() + "</res>");
	}
	out.println("</response>");
	out.close();
%>