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

梦里梦外; 2022-06-07 07:13 398阅读 0赞

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

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

**address.sql**

**\[sql\]** [view plain][] [copy][view plain]

1.  <span style="font-family:Microsoft YaHei;font-size:18px;">**CREATE****TABLE** address ( 
2.   id NUMBER(5), \--地名编码（唯一）
3.  **name** VARCHAR2(45), \--名字
4.   grade NUMBER(1), \--等级（0代表省，2代表市，3代表县）
5.   parentid NUMBER(5), \--父级编码,默认为0（0是顶级没有父类）
6.  **CONSTRAINT** pk\_address\_id **PRIMARY****KEY** (id) 
7.  
8.  ); 
9.  
10. **INSERT****INTO** address (id, **name**, grade, parentid) **VALUES** (1,'北京',0,0); 
11. **INSERT****INTO** address (id, **name**, grade, parentid) **VALUES** (2, '广东', 0, 0); 
12. **INSERT****INTO** address (id, **name**, grade, parentid) **VALUES** (3, '深圳', 0, 2); 
13. **INSERT****INTO** address (id, **name**, grade, parentid) **VALUES** (4, '福田区', 0, 3); 
14. **INSERT****INTO** address (id, **name**, grade, parentid) **VALUES** (5, '广州', 0, 2); 
15. **INSERT****INTO** address (id, **name**, grade, parentid) **VALUES** (6, '四川', 0, 0);</span>

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

![Center][]

**创建一个js文件夹存放js文件（需要引入json.js）：**

![Center 1][]  
**项目结构如图：**

![Center 2][]

**需要的包：**

![Center 3][]

**具体代码如下：**

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" src="js/json.js"></script>
    <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) {
    				/* 接收响应的字符串信息 */
    				var result = xhr.responseText;
    				//将list集合形式的json字符串解析成了数组
    				var adrs = JSON.parse(result);
    				//设置下拉列表的选项个数
    				c.options.length = adrs.length + 1;
    			
    				for (var i = 0; i < adrs.length; i++) {
    					c.options[i + 1].value = adrs[i].id;
    					c.options[i + 1].text = adrs[i].name;
    				}
    			}
    		}
    	}
    </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

package cn.sz.hcq.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.codehaus.jackson.map.ObjectMapper;
    
    import cn.sz.hcq.pojo.Adress;
    import cn.sz.hcq.service.IAdressService;
    import cn.sz.hcq.service.impl.AdressServiceImpl;
    
    //用注解配置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 {
    
    		IAdressService 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));
    			
    			// 创建实现转换的对象
    			ObjectMapper mapper = new ObjectMapper();
    			// 将list集合转换为json字符串
    			String str = mapper.writeValueAsString(citys);
    			PrintWriter out = response.getWriter();
    			System.out.println(str);
    			out.flush();
    			out.close();
    		}
    	}
    }

持久层：

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