AJAX 实现省市县地名三级联动

爱被打了一巴掌 2022-06-07 07:06 273阅读 0赞

AJAX 实现省市县地名三级联动

本案例运用到三层架构（表现层，服务层、持久层）表现层调用服务层的方法，服务层调用持久层的方法，使用数据库为Oracle数据库，在数据库中创建一张名为address的数据表。具体字段和插入的数据如下

**address.sql**

CREATE TABLE address (
      id       NUMBER(5), --地名编码（唯一）
      name     VARCHAR2(45), --名字
      grade    NUMBER(1), --等级（0代表省，2代表市，3代表县）
      parentid NUMBER(5), --父级编码,默认为0（0是顶级没有父类）
      CONSTRAINT pk_address_id PRIMARY KEY (id)
    
    );
    
    INSERT INTO address (id, name, grade, parentid) VALUES (1,'北京',0,0);
    INSERT INTO address (id, name, grade, parentid) VALUES (2, '广东', 0, 0);
    INSERT INTO address (id, name, grade, parentid) VALUES (3, '深圳', 0, 2);
    INSERT INTO address (id, name, grade, parentid) VALUES (4, '福田区', 0, 3);
    INSERT INTO address (id, name, grade, parentid) VALUES (5, '广州', 0, 2);
    INSERT INTO address (id, name, grade, parentid) VALUES (6, '四川', 0, 0);

**数据库数据如下：**

![Center][]

**项目结构如图：**

![Center 1][]

**需要的包：**

![Center 2][]

**具体代码如下：**

1、adress.jsp（显示界面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript">
    	/* 参数current表示当前操作的id,参数find表示将要查看的下一级id */
    	function findAdress(current, find) {
    		/* 	获得当前选中的地址的value值 */
    		var p = document.getElementById(current);
    		var id = p.value;
    
    		/* 如果当前选中的地址是省，则先将市和县的内容清空（只保留提示信息） */
    		if (current === "province") {
    			var ct = document.getElementById("city");
    			ct.options.length = 1;/* 为了保留提示信息 */
    			var co = document.getElementById("county");
    			co.options.length = 1;/* 为了保留提示信息 */
    		}
    		/* 如果当前选中的地址是市，则先县的内容清空 （只保留提示信息）*/
    		if (current === "city") {
    			var co = document.getElementById("county");
    			co.options.length = 1;/* 为了保留提示信息 */
    		}
    
    		/* 	获得将要查看的地址（市或者县）*/
    		var c = document.getElementById(find);
    
    		/* 接下来的步骤为AJAX异步查询当前地址的下级地址（并将它们追加到下拉框中） */
    
    		/* 步骤一：创建异步引擎对象 */
    		var xhr = new XMLHttpRequest();
    		//步骤一：打开引擎，method用于设置请求的方式：get或者post
    		/* url设置请求的路径，async设置是同步操作还是异步操作，默认是ture(异步) */
    		xhr.open("post", "adress.do");
    		/* 	Post方式请求要设置请求头 */
    		xhr.setRequestHeader("Content-Type",
    				"application/x-www-form-urlencoded");
    		/* 	发送 */
    		xhr.send("id=" + id);
    		/* 步骤三：检测引擎的状态改变 */
    		xhr.onreadystatechange = function() {
    			/* 判断响应是否已经接收完成和判断是否正常响应 */
    			if (xhr.readyState == 4 && xhr.status == 200) {
    				/* 接收响应的字符串信息 */
    				/* 	得到的字符串格式 ：    3,深圳!5,广州!    */
    				var result = xhr.responseText;
    				/* 		如果没有下级地址，则提示无数据 ，方法结束*/
    				if (result === null || result === "") {
    					var option = new Option("无数据", "无数据");
    					c.add(option);
    					return;
    				}
    				/* 		如果有下级地址，则处理字符串，追加下级地址*/
    				var sps = result.split("!");/* 用！分割字符串得到一个字符串数组（响应的数据以！分隔开下级地址的字符串） */
    				/* 		遍历数组，舍弃最后一个数组元素（最后一个元素为空）*/
    				/* 分割之后的字符串格式： 3,深圳   */
    				for (var i = 0; i < sps.length - 1; i++) {
    					/* 	再次以,分割字符串 */
    					var spss = sps[i].split(",");
    					/* spss[1]为option的text,spss[0]为option的value */
    					var option = new Option(spss[1], spss[0]);
    					c.add(option);
    				}
    			}
    		}
    
    	}
    </script>
    </head>
    <body>
    	<h1>省市县三级联动</h1>
    	省:
    	<select name="province" id="province"
    		οnchange="findAdress('province','city')">
    		<option>----请选择省----</option>
    		<c:forEach items="${list }" var="a">
    			<option value="${a.id }">${a.name }</option>
    		</c:forEach>
    	</select> 市:
    	<select name="province" id="city"
    		οnchange="findAdress('city','county')">
    		<option>----请选择市----</option>
    
    	</select> 县:
    	<select name="province" id="county">
    		<option>----请选择县----</option>
    
    	</select>
    </body>
    </html>

表现层：  
2、AdressServlet.java

//用注解配置servlet
    @WebServlet("/adress.do")
    public class AdressServlet extends HttpServlet {
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		this.doPost(request, response);
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		AdressService adressService = new AdressServiceImpl();
    		/* Post请求中文乱码处理 */
    		request.setCharacterEncoding("utf-8");
    		// 响应中文乱码处理
    		response.setContentType("text/html;charset=UTF-8");
    		// 获取到当前地址的id
    		String id = request.getParameter("id");
    		// 如果为空，则说明是第一次请求，则显示所有的省
    		if (id == null || id.equals("")) {
    			// 调用Service层方法获取所有的省
    			List<Adress> provinces = adressService.findAllProvinces();
    			// 将数据绑定到request
    			request.setAttribute("list", provinces);
    			// 页面转发到adress.jsp
    			request.getRequestDispatcher("adress.jsp").forward(request, response);
    		} else {
    			// 根据当前地址的id获取他的下级地址（当前地址的id也就是下级地址的parentid）
    			List<Adress> citys = adressService.findCitys(Integer.parseInt(id));
    			StringBuffer sb = new StringBuffer();
    			// 将获得的他的所有下级地址拼接成字符串返回（每个地址以！分隔），只查询下级地址的id和名字
    			for (Adress c : citys) {
    				sb.append(c.getId() + "," + c.getName() + "!");
    			}
    			PrintWriter out = response.getWriter();
    			out.write(sb.toString());
    			System.out.println(sb.toString());
    			out.flush();
    			out.close();
    		}
    
    	}
    
    }

持久层：

3、IAdressDAO.java （对应操作数据库的方法）

public interface IAdressDAO {
    	// 查寻所有的省
    	public List<Adress> findAllProvinces();
    
    	// 根据当前选中地址的id查询出他的下级地址
    	public List<Adress> findCitys(Integer id);
    
    }

4、AdressDAOImpl.java (具体实现操作数据库的方法)

public class AdressDAOImpl implements IAdressDAO {
    
    	public List<Adress> findAllProvinces() {
    		List<Adress> list = null;
    		Connection conn = null;
    		PreparedStatement ps = null;
    		ResultSet rs = null;
    		try {
    			list = new ArrayList<Adress>();
    			conn = DBUtils.getConn();
    			String sql = "select id,name,grade,parentid from address where grade=?";
    			ps = conn.prepareStatement(sql);
    			ps.setInt(1, 0);
    			rs = ps.executeQuery();
    			while (rs.next()) {
    				Adress a = new Adress();
    				a.setId(rs.getInt(1));
    				a.setName(rs.getString(2));
    				a.setGrade(rs.getInt(3));
    				a.setParentid(rs.getInt(4));
    				list.add(a);
    			}
    		} catch (SQLException e) {
    			e.printStackTrace();
    		} finally {
    			DBUtils.close(conn, ps, rs);
    		}
    		return list;
    	}
    
    	public List<Adress> findCitys(Integer id) {
    		List<Adress> list = null;
    		Connection conn = null;
    		PreparedStatement ps = null;
    		ResultSet rs = null;
    		try {
    			conn = DBUtils.getConn();
    			list = new ArrayList<Adress>();
    			String sql = "select id,name,grade,parentid from address where parentid=?";
    			ps = conn.prepareStatement(sql);
    			ps.setInt(1, id);
    			rs = ps.executeQuery();
    			while (rs.next()) {
    				Adress a = new Adress();
    				a.setId(rs.getInt(1));
    				a.setName(rs.getString(2));
    				a.setGrade(rs.getInt(3));
    				a.setParentid(rs.getInt(4));
    				list.add(a);
    			}
    		} catch (SQLException e) {
    			e.printStackTrace();
    		} finally {
    			DBUtils.close(conn, ps, rs);
    		}
    		return list;
    	}}

服务层：

5、IAdressService.java （服务层接口 定义方法）

public interface IAdressService {
    	public List<Adress> findAllProvinces();
    
    	public List<Adress> findCitys(Integer id);
    }

6、AdressServiceImpl.java (服务层接口 定义方法实现类)

public class AdressServiceImpl implements IAdressService {
    	private IAdressDAO adressDao = new AdressDAOImpl();
    
    	@Override
    	public List<Adress> findAllProvinces() {
    		return adressDao.findAllProvinces();
    	}
    
    	@Override
    	public List<Adress> findCitys(Integer id) {
    		return adressDao.findCitys(id);
    	}
    
    }

实体：

7、Adress.java

public class Adress implements Serializable {
    	private Integer id;
    	private String name;
    	private Integer grade;
    	private Integer parentid;
    
    
    	public Adress() {
    	}
    
    
    	public Adress(Integer id, String name, Integer grade, Integer parentid) {
    		this.id = id;
    		this.name = name;
    		this.grade = grade;
    		this.parentid = parentid;
    	}
    
    
    	public Integer getId() {
    		return id;
    	}
    
    
    	public void setId(Integer id) {
    		this.id = id;
    	}
    
    
    	public String getName() {
    		return name;
    	}
    
    
    	public void setName(String name) {
    		this.name = name;
    	}
    
    
    	public Integer getGrade() {
    		return grade;
    	}
    
    
    	public void setGrade(Integer grade) {
    		this.grade = grade;
    	}
    
    
    	public Integer getParentid() {
    		return parentid;
    	}
    
    
    	public void setParentid(Integer parentid) {
    		this.parentid = parentid;
    	}
    
    }

数据库连接：

8、DBUtils.java (数据库连接工具类)

public class DBUtils {
    	public static Connection getConn() {
    		Connection conn = null;
    		try {
    			// 加载数据库驱动
    			DriverManager.registerDriver(new OracleDriver());
    			// 获得连接
    			conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:yztc", "scott", "tiger");
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    		return conn;
    	}
    
    	public static void close(Connection conn, PreparedStatement ps, ResultSet rs) {
    		try {
    			if (rs != null)
    				rs.close();
    			if (ps != null)
    				ps.close();
    			if (conn != null)
    				conn.close();
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    	}
    }

结果截图：

项目部署成功后，在游览器输入如下地址即可

![Center 3][]

[Center]: /images/20220607/8d66c35182c5450884209d395b1e4499.png
[Center 1]: /images/20220607/022de22046d64ff799b872db23a9db16.png
[Center 2]: /images/20220607/3b540661c74d48bdaa5c51c94144b67e.png
[Center 3]: /images/20220607/4219f93dec494e39a25261ae8a6c474a.png