dwr + jsp 实现连接数据库的三级级联下拉选择菜单

在网上看了很多三级级联的例子，大多数都是js的，数据都是写死的，要从数据库里取出数据来实现三级级联的很少，最近做项目需要用到从数据库取数据实现三级菜单，在网上找了找dwr可以实现，但都是简单的小列子，下了些教程和例子，拿来自己研究了下，终于做出来了。

1.先要下载dwr.jar包，把它导入到项目的lib目录下,

2.在web.xml的编写如下

     <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>
   org.directwebremoting.servlet.DwrServlet
  </servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr
@SuppressWarnings("unchecked")
public class CountryDAO
{
 
 public List queryAll()
 {
     Session session = HibernateUtil.getSession();
     session.beginTransaction().begin();
  List list = new ArrayList();
  try
  {
   String hql = "From Country";
       Query query = session.createQuery(hql);
      List  countrylist = query.list() ;
      session.getTransaction().commit();
      System.out.println("国家列表大小"+countrylist.size());
            for(int i=0;i<countrylist.size();i++)
            {
             Country country = (Country) countrylist.get(i);
              Country cy= new Country();
              cy.setId(country.getId());
              cy.setCountryName(country.getCountryName());
              list.add(cy);
            }
  } catch (Exception e)
  {
   e.printStackTrace();
  }
        finally
        {
         session.close();
        }
  return list;
 }

 
 public List queryProvinceById(Integer countryId)
 {
    Session session = HibernateUtil.getSession();
    session.beginTransaction().begin();
    List list = new ArrayList();
  try
  {
   String hql = "From Province where countryId = "+countryId+"";
      Query query = session.createQuery(hql);
       List  provincelist = query.list() ;
       session.getTransaction().commit();
             for(int i=0;i<provincelist.size();i++)
             {
              Province province = (Province) provincelist.get(i);
              Province pro = new Province();
              pro.setId(province.getId());
              pro.setProvinceName(province.getProvinceName());
     list.add(pro);
             }
  } catch (Exception e)
  {
   e.printStackTrace();
  }
        finally
        {
         session.close();
        }
  return list;
 }

 
 public List queryCityById(Integer provinceId)
 {
    Session session = HibernateUtil.getSession();
    session.beginTransaction().begin();
    List list = new ArrayList();
  try
  {
   String hql = "From City where provinceId ="+provinceId+"";
      Query query = session.createQuery(hql);
       List  citylist = query.list() ;
       session.getTransaction().commit();
             for(int i=0;i<citylist.size();i++)
             {
              City city1 = (City) citylist.get(i);
              City city2= new City();
              city2.setId(city1.getId());
              city2.setCityName(city1.getCityName());
     list.add(city2);
             }
  } catch (Exception e)
  {
   e.printStackTrace();
  }
        finally
        {
         session.close();
        }
  return list;
 }

 // 测试dao的输出方法
 public static void p(Object o)
 {
  System.out.println(o);
 }

 public static void main(String[] args)
 {
  CountryDAO countryDAO = new CountryDAO();
  p(countryDAO.queryAll());
  p(countryDAO.queryProvinceById(1));
  p(countryDAO.queryCityById(2));
 }
}
7.Servle类，定义一动作类，调用dao

  --------SelectServlet.java----------

package com.test.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.test.dao.CountryDAO;

 

@SuppressWarnings("serial")
public class SelectServlet extends HttpServlet
{

 public SelectServlet()
 {
  super();
 }

 public void destroy()
 {
  super.destroy();
 }

 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException
 {
  Integer type = Integer.parseInt(request.getParameter("type"));
  // 跳转到test.jsp,其实这里的type参数可有可无，在这个例子中，不过这可是最佳实践哦！有利于扩展~
  if (type == 0)
  {
   // 查询出所有国家并放入reuqest范围中
   CountryDAO countryDAO = new CountryDAO();
   request.setAttribute("countrys", countryDAO.queryAll());
   request.getRequestDispatcher("/test.jsp")
     .forward(request, response);
  }
 }

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException
 {
  doGet(request, response);
 }

 public void init() throws ServletException
 {
 }

}

8.跳转页面index.jsp代码，其实也可以不需要

   <%@ page language="java" pageEncoding="GBK"%>
<html>
 <head>
  <title>test</title>
  <script type="text/javascript">
   window.location = "select?type=0";
  </script>
 </head>

 <body>
  
 </body>
</html>
9.效果页面代码

    <%@ page language="java" import="java.util.*,com.test.pojo.*"  pageEncoding="GBK"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<html>
 <head>
  <title>DWR三级联动</title>
  <script type='text/javascript' src='/Test02/dwr/interface/menu.js'></script>
  <script type='text/javascript' src='/Test02/dwr/engine.js'></script>
  <script type='text/javascript' src='/Test02/dwr/util.js'></script>
 </head>

 <body>
  <script type="text/javascript">
 //根据国家id查询所属省或州
 function queryProvince()
 {
  var countryId = $("country").value;
  //默认为不选择
  if(countryId == 0)
  {
   $("province").options.length=0;
   $("city").options.length=0;
  }
  else
  {
   menu.queryProvinceById(countryId,provinceCallback);
  } 
 }
 //根据国家id查询所属省或州的回调函数
 function provinceCallback(provinces)
 {
      $("province").options.length=0;
      //每次获得新的数据的时候先把每二个下拉框架的长度清0
      for(var i=0;i< provinces.length;i ++){
        var value = provinces[i].id;
        var text = provinces[i].provinceName;
        var option = new Option(text, value);
        //根据每组value和text标记的值创建一个option对象
        try{
          $("province").add(option);//将option对象添加到第二个下拉框中
        }catch(e){
        }
      }
      //同时关联第三级
      var provinceId = $("province").value;
      menu.queryCityById(provinceId,cityCallback);
 }
 //查询所属城市
 function queryCity()
 {
  var provinceId = $("province").value;
  menu.queryCityById(provinceId,cityCallback);
 }
 //查询所属城市回调函数
 function cityCallback(citys)
 {
      //每次获得新的数据的时候先把每三个下拉框架的长度清0
   $("city").options.length=0;
      for(var i=0;i< citys.length;i ++){
        var value = citys[i].id;
        var text = citys[i].cityName;
        var option = new Option(text, value);
        //根据每组value和text标记的值创建一个option对象
        try{
          $("city").add(option);//将option对象添加到第三个下拉框中
        }catch(e){
        }
      }
 }
 
 function change1()
 {
  queryProvince();
 }
 
 function change2()
 {
  queryCity();
 }
</script>
  <div align="center">
   <h3>
    <br>
   </h3>
   <h3>
    DWR三级联动演示
   </h3>
   <!-- 我都奇怪了，我的<c>标签在这里不能用 -->
   <select id="country" οnchange="change1();">
    <option selected="selected" value="0">
     请选择
    </option>
    <%
     @SuppressWarnings("unchecked")
     List list = (List) request.getAttribute("countrys");
     for (int i = 0; i < list.size(); i++)
     {
      Country temp = (Country) list.get(i);
    %>
    <option value="<%=temp.getId()%>"><%=temp.getCountryName()%></option>
    <%
     }
    %>
   </select>

   <select id="province" οnchange="change2();">

   </select>

   <select id="city">
   </select>
  </div>
 </body>
</html>

10.最终页面效果

    

2011-08-05 09:52:48