avanry 发表于 2013-2-6 11:03:30

Ajax,Jsp 级联菜单一

最近参照网上的例子,做了个级联菜单。学习一下ajax
参照的列子为:JavaDB+JSP+AJAX实现的级联下拉菜单
他那个为英文的,我改为能处理中文的级联菜单。
我在想能不能在一个页面实现呢?
新手,请多交流
源码如下:

index.jsp
<%@ 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.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.firstChild.data,res.firstChild.data));      }}// 创建级联菜单函数function showSubMenu(obj) {sendRequest("menu.jsp?sort=" + obj );/**下面这一句的作用是:每次选择后回到第一个选项**/// document.all.mli.options.selected=true;}</script></head><body><select onchange="showSubMenu(this.options.value)" name="select1">//下面由于数据库结构不一样,我直接写上的,也可以从数据库中取出<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.value)"><option name="">---请选择---</option></select></body></html>
menu.jsp:
<%@ 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>");%>
页: [1]
查看完整版本: Ajax,Jsp 级联菜单一