黑马程序员技术交流社区

标题: 动态四级联菜单 [打印本页]

作者: 高欢欢 时间: 2012-7-16 17:34
标题: 动态四级联菜单
以前在学校做过二级联动态菜单  用的Ajax，但是那个数据库用的是mysql；

数据库oracle，用了四张表：国家这张表在访问JSP时自动从数据库里面加载：
建表的过程就省略了；
jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/ajax.js" charset="gb2312"></script>
  </head>

  <body onload="country()">
  <center>
<h1>AJAX实现联动菜单</h1>
<hr/>
<table align="center">
   <tr>
   <td id="1">
      <select id="country" onchange="getPronvice()" style="text-align: center;">
         <option>---请选择---</option>
      </select>
   </td>
   <td id="2"></td>
   <td id="3"></td>
   <td id="4"></td>
   </tr>
</table>
</center>
  </body>
</html>

JS页面：

var xmlHttp;
var zcq=0;
//自动加载国家
function country() {
var text = "sql=SELECT co_name FROM COUNTRY order by nvl(length(trim(co_name)),0) asc,co_name";
var url = "ajax/ajax!selectName.action";
createXmlhttp();
if (xmlHttp) {
      xmlHttp.open("POST", url, true);
      xmlHttp.setRequestHeader("Cache-Control", "no-cache");
      xmlHttp.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
      xmlHttp.onreadystatechange = function() {
         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            parseMessage('country');
         }
      }
      xmlHttp.send(text);
}
}

//实现一级联动省份
function getPronvice() {
var country = document.getElementById("country").value;
var url = "ajax/ajax!selectName.action";
var text = "sql=SELECT pr_name FROM pronvice pr,country co WHERE co.co_id=pr.co_id and co.co_name='"
         + country + "' order by nvl(length(trim(pr_name)),0) asc,pr_name";
createXmlhttp();
if (xmlHttp) {
      xmlHttp.open("POST", url, true);
      xmlHttp.setRequestHeader("Cache-Control", "no-cache");
      xmlHttp.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
      xmlHttp.onreadystatechange = function() {
         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            if(zcq==0){
                  createSelect('pronvice', '2', 'getCity()');
                  zcq=1;
            }

            parseMessage('pronvice');
         }
      }
      xmlHttp.send(text);
}
}
//实现二级联动城市
function getCity() {
var pronvice = document.getElementById("pronvice").value;
var url = "ajax/ajax!selectName.action";
var text = "sql=SELECT ci_name FROM city ci,pronvice pr WHERE ci.pr_id = pr.pr_id and pr.pr_name='"
         + pronvice + "' order by nvl(length(trim(ci_name)),0) asc,ci_name";
createXmlhttp();
if (xmlHttp) {
      xmlHttp.open("POST", url, true);
      xmlHttp.setRequestHeader("Cache-Control", "no-cache");
      xmlHttp.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
      xmlHttp.onreadystatechange = function() {
         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            if(zcq==1){
                  createSelect('city', '3', 'getArea()');
                  zcq=2;
            }

            parseMessage('city');
         }
      }
      xmlHttp.send(text);
}
}
//实现三级联动区县
function getArea() {
var city = document.getElementById("city").value;
var url = "ajax/ajax!selectName.action";
var text = "sql=SELECT ar_name FROM city ci,area ar WHERE ci.ci_id=ar.ci_id and ci.ci_name='"
         + city + "' order by nvl(length(trim(ar_name)),0) asc,ar_name";
createXmlhttp();
if (xmlHttp) {
      xmlHttp.open("POST", url, true);
      xmlHttp.setRequestHeader("Cache-Control", "no-cache");
      xmlHttp.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
      xmlHttp.onreadystatechange = function() {
         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            if(zcq==2){
                  createSelect('area', '4', '');
                  zcq=3;
            }

            parseMessage('area');
         }
      }
      xmlHttp.send(text);
}
}
//创建xmlHttp对象
function createXmlhttp() {
if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//自动创建创建下拉菜单方法
function createSelect(iid, id, methodName) {
var select = document.createElement("select");
select.style.cssText = "text-align: center";
select.id = iid;
document.getElementById(id).appendChild(select);
var obj = document.getElementById(iid);
obj.setAttribute("onchange", methodName);
}
//动态解析生成下拉菜单
function parseMessage(id) {
var xmlDoc = xmlHttp.responseXML.documentElement;
var xSel = xmlDoc.getElementsByTagName('root');
var select_root = document.getElementById(id);
select_root.options.length = 0;
for ( var i = 0; i < xSel.length; i++) {
      var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
      var xText = xSel[i].childNodes[0].firstChild.nodeValue;
      var option = new Option(xText, xValue);
      select_root.add(option);
}
}

action页面：

package com.zit.ajaxJoin.action;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;
import com.zit.ajaxJoin.dao.AjaxJoinDao;
import com.zit.ajaxJoin.dao.impl.AjaxJoinDaoImpl;

public class AjaxAction extends ActionSupport{
private static final long serialVersionUID = 1L;

private String sql;

public String getSql() {
      return sql;
}
public void setSql(String sql) {
      this.sql = sql;
}
public String selectName() throws IOException{
      HttpServletResponse response= ServletActionContext.getResponse();
      response.setContentType("html/xml;charset=gb2312");
      response.setCharacterEncoding("UTF-8");
      AjaxJoinDao ajax=new AjaxJoinDaoImpl();
      List<String>list=ajax.selectName(sql);
      String strat_xml="<roots>";
      String end_xml="</roots>";
      String xml="<root><name>---请选择---</name></root>";
      for(String string:list){
         xml+="<root><name>"+string+"</name></root>";
      }
      response.getWriter().write(strat_xml+xml+end_xml);
      return null;
}
}

实现类查询数据库的方法：

package com.zit.ajaxJoin.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.zit.ajaxJoin.dao.AjaxJoinDao;
import com.zit.ajaxJoin.db.Db;

public class AjaxJoinDaoImpl implements AjaxJoinDao {

private Connection conn;
private PreparedStatement ps;
private Statement stmt;
private ResultSet rs;
private Db db=null;
public List<String> selectName(String sql) {
      if(null==db){
         db=new Db();
      }
      //System.out.println(sql);
      List<String>list=new ArrayList<String>();
      try {
         conn=db.getConnection();
         conn.setAutoCommit(false);
         stmt=conn.createStatement();
         rs=stmt.executeQuery(sql);
         conn.commit();
         while(rs.next()){
            list.add(rs.getString(1));
         }
      } catch (Exception e) {
         e.printStackTrace();
      }finally{
         db.close(conn, ps, stmt, rs);
      }
      return list;
}
}

struts.xml配置信息：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.enable.DynamicMethodInvocation" value="true" />
<constant name="struts.devMode" value="true" />
<package name="ajax" namespace="/ajax" extends="struts-default">
   <action name="ajax" class="com.zit.ajaxJoin.action.AjaxAction">
      <result name="success">
      /success.jsp
      </result>
   </action>
</package>
</struts>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2