使用Struts2+Jquery实现三级联动[转]

1.准备数据

  1. create database linkage;  
  2. use linkage;  
  3.   
  4. --省份  
  5. create table province  
  6. (  
  7.    pid int primary key,     
  8.    pname varchar(20)   
  9. );  
  10.   
  11. insert into province(pid,pname) values(1,'吉林省');  
  12. insert into province(pid,pname) values(2,'辽宁省');  
  13.   
  14.   
  15. --城市  
  16. create table city  
  17. (  
  18.    cid int primary key,     
  19.    cname varchar(20),   
  20.    pid int      
  21. );  
  22.   
  23. insert into city(cid,cname,pid) values(1,'长春',1);  
  24. insert into city(cid,cname,pid) values(2,'四平',1);  
  25.   
  26. insert into city(cid,cname,pid) values(3,'大连',2);  
  27. insert into city(cid,cname,pid) values(4,'鞍山',2);  
  28.   
  29.   
  30.   
  31.   
  32. -- 乡镇  
  33. create table town   
  34. (  
  35.    tid int primary key,     
  36.    tname varchar(20),   
  37.    cid int        
  38. );  
  39.   
  40. insert into town(tid,tname,cid) values(1,'九台',1);  
  41. insert into town(tid,tname,cid) values(2,'农安',1);  
  42.   
  43. insert into town(tid,tname,cid) values(3,'梨树',2);  
  44. insert into town(tid,tname,cid) values(4,'公主岭',2);  
  45.   
  46. insert into town(tid,tname,cid) values(5,'沙河口',3);  
  47. insert into town(tid,tname,cid) values(6,'甘井子',3);  
  48.   
  49. insert into town(tid,tname,cid) values(7,'铁东',4);  
  50. insert into town(tid,tname,cid) values(8,'立山',4);  

 2.创建实体对象

2.1省份

  1. package org.monday.domain;  
  2.   
  3. /** 
  4.  * 省份 
  5.  *  
  6.  * @author Monday 
  7.  */  
  8. public class Province {  
  9.   
  10.     private Integer pid;  
  11.     private String pname;  
  12.   
  13.     public Integer getPid() {  
  14.         return pid;  
  15.     }  
  16.   
  17.     public void setPid(Integer pid) {  
  18.         this.pid = pid;  
  19.     }  
  20.   
  21.     public String getPname() {  
  22.         return pname;  
  23.     }  
  24.   
  25.     public void setPname(String pname) {  
  26.         this.pname = pname;  
  27.     }  
  28.   
  29. }  

 

2.2城市实体

  1. package org.monday.domain;  
  2.   
  3. /** 
  4.  * 城市 
  5.  *  
  6.  * @author Monday 
  7.  */  
  8. public class City {  
  9.   
  10.     private Integer cid;  
  11.     private String cname;  
  12.     private Integer pid;  
  13.   
  14.     public Integer getCid() {  
  15.         return cid;  
  16.     }  
  17.   
  18.     public void setCid(Integer cid) {  
  19.         this.cid = cid;  
  20.     }  
  21.   
  22.     public String getCname() {  
  23.         return cname;  
  24.     }  
  25.   
  26.     public void setCname(String cname) {  
  27.         this.cname = cname;  
  28.     }  
  29.   
  30.     public Integer getPid() {  
  31.         return pid;  
  32.     }  
  33.   
  34.     public void setPid(Integer pid) {  
  35.         this.pid = pid;  
  36.     }  
  37.   
  38. }  

 

2.3乡镇实体

  1. package org.monday.domain;  
  2.   
  3. /** 
  4.  * 乡镇 
  5.  *  
  6.  * @author Monday 
  7.  */  
  8. public class Town {  
  9.   
  10.     private Integer tid;  
  11.     private String tname;  
  12.     private Integer cid;  
  13.   
  14.     public Integer getTid() {  
  15.         return tid;  
  16.     }  
  17.   
  18.     public void setTid(Integer tid) {  
  19.         this.tid = tid;  
  20.     }  
  21.   
  22.     public String getTname() {  
  23.         return tname;  
  24.     }  
  25.   
  26.     public void setTname(String tname) {  
  27.         this.tname = tname;  
  28.     }  
  29.   
  30.     public Integer getCid() {  
  31.         return cid;  
  32.     }  
  33.   
  34.     public void setCid(Integer cid) {  
  35.         this.cid = cid;  
  36.     }  
  37.   
  38. }  

 

3.编写DAO层（Service这里就省略了...）

3.0JDBC工具类

  1. package org.monday.util;  
  2.   
  3. import java.io.InputStream;  
  4. import java.sql.Connection;  
  5. import java.sql.DriverManager;  
  6. import java.sql.PreparedStatement;  
  7. import java.sql.ResultSet;  
  8. import java.sql.SQLException;  
  9. import java.util.Properties;  
  10.   
  11. /** 
  12.  * JDBC工具类 
  13.  *  
  14.  * @author Monday 
  15.  */  
  16. public class JdbcUtil {  
  17.   
  18.     private static Properties config = new Properties();  
  19.   
  20.     /** 
  21.      * 加载驱动 
  22.      */  
  23.     static {  
  24.         try {  
  25.             InputStream in = JdbcUtil.class.getClassLoader().getResourceAsStream("jdbc.properties");  
  26.             config.load(in);  
  27.             Class.forName(config.getProperty("driver"));  
  28.         } catch (Exception e) {  
  29.             throw new ExceptionInInitializerError(e);  
  30.         }  
  31.     }  
  32.   
  33.     /** 
  34.      * 获取连接 
  35.      */  
  36.     public static Connection getConnection() {  
  37.         try {  
  38.             return DriverManager.getConnection(config.getProperty("url"), config.getProperty("username"), config  
  39.                     .getProperty("password"));  
  40.         } catch (SQLException e) {  
  41.             throw new RuntimeException(e);  
  42.         }  
  43.     }  
  44.   
  45.     /** 
  46.      * 释放资源 
  47.      */  
  48.     public static void release(Connection conn, PreparedStatement pstmt, ResultSet rs) {  
  49.         if (rs != null) {  
  50.             try {  
  51.                 rs.close();  
  52.             } catch (SQLException e) {  
  53.                 e.printStackTrace();  
  54.             }  
  55.             rs = null;  
  56.         }  
  57.         if (pstmt != null) {  
  58.             try {  
  59.                 pstmt.close();  
  60.             } catch (SQLException e) {  
  61.                 e.printStackTrace();  
  62.             }  
  63.             pstmt = null;  
  64.         }  
  65.         if (conn != null) {  
  66.             try {  
  67.                 conn.close();  
  68.             } catch (SQLException e) {  
  69.                 e.printStackTrace();  
  70.             }  
  71.             conn = null;  
  72.         }  
  73.     }  
  74.   
  75.     /** 
  76.      * 测试连接 
  77.      */  
  78.     public static void main(String[] args) {  
  79.         System.out.println(JdbcUtil.getConnection());  
  80.         System.out.println("ok");  
  81.     }  
  82. }  

jdbc.properties

  1. driver=com.mysql.jdbc.Driver  
  2. url=jdbc:mysql://localhost:3306/linkage  
  3. username=root  
  4. password=root  

  

 

3.1省份DAO

  1. package org.monday.dao;  
  2.   
  3. import java.sql.Connection;  
  4. import java.sql.PreparedStatement;  
  5. import java.sql.ResultSet;  
  6. import java.sql.SQLException;  
  7. import java.util.ArrayList;  
  8. import java.util.List;  
  9.   
  10. import org.monday.domain.Province;  
  11. import org.monday.util.JdbcUtil;  
  12.   
  13. /** 
  14.  * 省份DAO 
  15.  *  
  16.  * @author Monday 
  17.  */  
  18. public class ProvinceDao {  
  19.   
  20.     public List<Province> findAllProvince() {  
  21.         List<Province> list = new ArrayList<Province>();  
  22.         Connection conn = null;  
  23.         PreparedStatement pstmt = null;  
  24.         ResultSet rs = null;  
  25.         try {  
  26.             conn = JdbcUtil.getConnection();  
  27.             String sql = "select pid,pname from province";  
  28.             pstmt = conn.prepareStatement(sql);  
  29.             rs = pstmt.executeQuery();  
  30.             while (rs.next()) {  
  31.                 Province province = new Province();  
  32.                 province.setPid(rs.getInt("pid"));  
  33.                 province.setPname(rs.getString("pname"));  
  34.                 list.add(province);  
  35.             }  
  36.         } catch (SQLException e) {  
  37.             throw new RuntimeException(e);  
  38.         } finally {  
  39.             JdbcUtil.release(conn, pstmt, rs);  
  40.         }  
  41.         return list;  
  42.     }  
  43. }  

 3.2城市DAO

  1. package org.monday.dao;  
  2.   
  3. import java.sql.Connection;  
  4. import java.sql.PreparedStatement;  
  5. import java.sql.ResultSet;  
  6. import java.sql.SQLException;  
  7. import java.util.ArrayList;  
  8. import java.util.List;  
  9.   
  10. import org.monday.domain.City;  
  11. import org.monday.util.JdbcUtil;  
  12.   
  13. /** 
  14.  * 城市DAO 
  15.  *  
  16.  * @author Monday 
  17.  */  
  18. public class CityDao {  
  19.     public List<City> findAllCity(Integer pid) {  
  20.         List<City> list = new ArrayList<City>();  
  21.         Connection conn = null;  
  22.         PreparedStatement pstmt = null;  
  23.         ResultSet rs = null;  
  24.         try {  
  25.             conn = JdbcUtil.getConnection();  
  26.             String sql = "select cid,cname,pid from city where pid=?";  
  27.             pstmt = conn.prepareStatement(sql);  
  28.             pstmt.setInt(1, pid);  
  29.             rs = pstmt.executeQuery();  
  30.             while (rs.next()) {  
  31.                 City city = new City();  
  32.                 city.setCid(rs.getInt("cid"));  
  33.                 city.setCname(rs.getString("cname"));  
  34.                 city.setPid(rs.getInt("pid"));  
  35.                 list.add(city);  
  36.             }  
  37.         } catch (SQLException e) {  
  38.             throw new RuntimeException(e);  
  39.         } finally {  
  40.             JdbcUtil.release(conn, pstmt, rs);  
  41.         }  
  42.         return list;  
  43.     }  
  44. }  

 

3.3乡镇DAO

  1. package org.monday.dao;  
  2.   
  3. import java.sql.Connection;  
  4. import java.sql.PreparedStatement;  
  5. import java.sql.ResultSet;  
  6. import java.sql.SQLException;  
  7. import java.util.ArrayList;  
  8. import java.util.List;  
  9.   
  10. import org.monday.domain.Town;  
  11. import org.monday.util.JdbcUtil;  
  12.   
  13. /** 
  14.  * 乡镇DAO 
  15.  *  
  16.  * @author Monday 
  17.  */  
  18. public class TownDao {  
  19.     public List<Town> findAllTown(Integer cid) {  
  20.         List<Town> list = new ArrayList<Town>();  
  21.         Connection conn = null;  
  22.         PreparedStatement pstmt = null;  
  23.         ResultSet rs = null;  
  24.         try {  
  25.             conn = JdbcUtil.getConnection();  
  26.             String sql = "select tid,tname,cid from town where cid=?";  
  27.             pstmt = conn.prepareStatement(sql);  
  28.             pstmt.setInt(1, cid);  
  29.             rs = pstmt.executeQuery();  
  30.             while (rs.next()) {  
  31.                 Town town = new Town();  
  32.                 town.setTid(rs.getInt("tid"));  
  33.                 town.setTname(rs.getString("tname"));  
  34.                 town.setCid(rs.getInt("cid"));  
  35.                 list.add(town);  
  36.             }  
  37.         } catch (SQLException e) {  
  38.             throw new RuntimeException(e);  
  39.         } finally {  
  40.             JdbcUtil.release(conn, pstmt, rs);  
  41.         }  
  42.         return list;  
  43.     }  
  44. }  

 

 啰嗦了半天....终于写WEB层了...

 

4.Action

  1. package org.monday.web;  
  2.   
  3. import java.io.IOException;  
  4. import java.util.List;  
  5.   
  6. import javax.servlet.http.HttpServletResponse;  
  7.   
  8. import net.sf.json.JSONArray;  
  9.   
  10. import org.apache.struts2.ServletActionContext;  
  11. import org.monday.dao.CityDao;  
  12. import org.monday.dao.ProvinceDao;  
  13. import org.monday.dao.TownDao;  
  14. import org.monday.domain.City;  
  15. import org.monday.domain.Province;  
  16. import org.monday.domain.Town;  
  17.   
  18. import com.opensymphony.xwork2.ActionSupport;  
  19.   
  20. /** 
  21.  * 处理三级联动的Action 
  22.  *  
  23.  * @author Monday 
  24.  */  
  25. public class LinkageAction extends ActionSupport {  
  26.   
  27.     private static final long serialVersionUID = -8658430555400755301L;  
  28.   
  29.     private Integer pid;  
  30.     private Integer cid;  
  31.   
  32.     private HttpServletResponse response = ServletActionContext.getResponse();  
  33.   
  34.     /** 
  35.      * 获取省份 
  36.      */  
  37.     public String getProvince() {  
  38.         ProvinceDao provinceDao = new ProvinceDao();  
  39.         List<Province> provinceList = provinceDao.findAllProvince();  
  40.         JSONArray jsonArray = JSONArray.fromObject(provinceList);  
  41.         try {  
  42.             response.setContentType("text/html;charset=UTF-8");  
  43.             response.getWriter().print(jsonArray.toString());  
  44.         } catch (IOException e) {  
  45.             e.printStackTrace();  
  46.         }  
  47.         return null;  
  48.     }  
  49.   
  50.     /** 
  51.      * 获取城市 
  52.      */  
  53.     public String getCityByPid() {  
  54.         CityDao cityDao = new CityDao();  
  55.         List<City> cityList = cityDao.findAllCity(pid);  
  56.         JSONArray jsonArray = JSONArray.fromObject(cityList);  
  57.         try {  
  58.             response.setContentType("text/html;charset=UTF-8");  
  59.             response.getWriter().print(jsonArray.toString());  
  60.         } catch (IOException e) {  
  61.             e.printStackTrace();  
  62.         }  
  63.         return null;  
  64.     }  
  65.   
  66.     /** 
  67.      * 获取乡镇 
  68.      */  
  69.     public String getTownByCid() {  
  70.         TownDao townDao = new TownDao();  
  71.         List<Town> townList = townDao.findAllTown(cid);  
  72.         JSONArray jsonArray = JSONArray.fromObject(townList);  
  73.         try {  
  74.             response.setContentType("text/html;charset=UTF-8");  
  75.             response.getWriter().print(jsonArray.toString());  
  76.         } catch (IOException e) {  
  77.             e.printStackTrace();  
  78.         }  
  79.         return null;  
  80.     }  
  81.   
  82.     // -----------------  
  83.   
  84.     public Integer getPid() {  
  85.         return pid;  
  86.     }  
  87.   
  88.     public void setPid(Integer pid) {  
  89.         this.pid = pid;  
  90.     }  
  91.   
  92.     public Integer getCid() {  
  93.         return cid;  
  94.     }  
  95.   
  96.     public void setCid(Integer cid) {  
  97.         this.cid = cid;  
  98.     }  
  99. }  

 

strutx.xml

  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC  
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"  
  4.     "http://struts.apache.org/dtds/struts-2.1.7.dtd">  
  5.   
  6. <struts>  
  7.     <!-- 设置开发模式 -->  
  8.     <constant name="struts.devMode" value="true" />  
  9.       
  10.     <package name="default" namespace="" extends="struts-default">  
  11.         <action name="linkageAction_*" class="org.monday.web.LinkageAction" method="{1}">  
  12.             <result></result>  
  13.         </action>  
  14.       
  15.     </package>  
  16. </struts>  

  

5.HTML

  1. <html>  
  2.   <head>  
  3.     <title>三级联动</title>  
  4.     <script language="JavaScript" src="jquery-1.4.2.js"></script>  
  5.     <script type="text/javascript" src="my.js"></script>  
  6.   </head>  
  7.   <body>  
  8.      <select id="province" name="province">  
  9.        <option value="">请选择</option>  
  10.      </select>  
  11.      <select id="city" name="city">  
  12.         <option value="">请选择</option>  
  13.      </select>  
  14.      <select id="town" name="town">  
  15.         <option value="">请选择</option>  
  16.      </select>  
  17.   </body>  
  18. </html>  

 

6.JS（重点来了）

  1. $(document).ready(function () {  
  2.     /* 获取省份 */  
  3.     $.post("linkageAction_getProvince.action", function (data) {  
  4.         var jsonObj = eval("(" + data + ")");  
  5.         for (var i = 0; i < jsonObj.length; i++) {  
  6.             var $option = $("<option></option>");  
  7.             $option.attr("value", jsonObj[i].pid);  
  8.             $option.text(jsonObj[i].pname);  
  9.             $("#province").append($option);  
  10.         }  
  11.     });  
  12.     /* 根据省份获取城市 */  
  13.     $("#province").change(function () {  
  14.         $.post("linkageAction_getCityByPid.action", {pid:$("#province").val()}, function (data) {  
  15.             /* 清空城市 */  
  16.             $("#city option[value!='']").remove();  
  17.             /* 清空乡镇 */  
  18.             $("#town option[value!='']").remove();  
  19.             var jsonObj = eval("(" + data + ")");  
  20.             for (var i = 0; i < jsonObj.length; i++) {  
  21.                 var $option = $("<option></option>");  
  22.                 $option.attr("value", jsonObj[i].cid);  
  23.                 $option.text(jsonObj[i].cname);  
  24.                 $("#city").append($option);  
  25.             }  
  26.         });  
  27.     });  
  28.     /* 根据城市获取乡镇 */  
  29.     $("#city").change(function () {  
  30.         $.post("linkageAction_getTownByCid", {cid:$("#city").val()}, function (data) {  
  31.             /* 清空乡镇 */  
  32.             $("#town option[value!='']").remove();  
  33.             var jsonObj = eval("(" + data + ")");  
  34.             for (var i = 0; i < jsonObj.length; i++) {  
  35.                 var $option = $("<option></option>");  
  36.                 $option.attr("value", jsonObj[i].tid);  
  37.                 $option.text(jsonObj[i].tname);  
  38.                 $("#town").append($option);  
  39.             }  
  40.         });  
  41.     });  
  42. });  

 

项目结构：


==================================================
posted on 2014-10-10 10:07  小光zfg  阅读(229)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3