Ajax实现简单三级联动

最新推荐文章于 2021-10-03 17:02:15 发布

原创最新推荐文章于 2021-10-03 17:02:15 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

Front 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于简单Servlet响应前端请求并结合Ajax实现的省-市-县三级联动选择器。通过前后端交互，实现了根据用户选择动态加载下级区域选项的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用简单的Servlet响应前端请求，结合ajax实现省-市-县的三级联动（后台Service层和dao层代码省略）

前端页面展示：

  <body>
	<select id="provinceId" onchange="provinceChange(this.value)">
		<option value="default">--------请选择--------</option>
		<c:forEach var="province" items="${provinces}">
			 <option value="${province.code }">${province.name}</option>
		</c:forEach>
	</select>
	
	<select id="cityId" onchange="cityChange(this.value)">
		<option value="default">--------城市--------</option>
	</select>
	
	<select id="townId">
		<option value="default">--------区县--------</option>
	</select>
  </body>

js代码：

<script type="text/javascript">
  	function provinceChange(code){
  		var xhr = new XMLHttpRequest();
  		
  		xhr.onreadystatechange=function(){
  			if(xhr.readyState==4&&xhr.status==200){
  				eval('var cities=' + xhr.responseText);
  				//console.log(cities);
  				var list = document.getElementById("cityId");
  				while(list.hasChildNodes()){
  					list.removeChild(list.firstChild);
  			    }
  				
  				for(var i=0;i<cities.length;i++){
  					/* console.log(cities[i].name); */
  					var node = document.createElement("option");
  					var text = document.createTextNode(cities[i].name);
  					node.setAttribute("value", cities[i].code);
  					node.appendChild(text);
  					list.appendChild(node);
  					if(i==0){
  						node.setAttribute("selected", true);
  					}
  				}
  				cityChange(list.value);
  			}
  		};
  		var url = 'AddressServlet?' + 'type=province&code=' + code;
  		xhr.open("POST", url, true);
  		xhr.send(null);
  	}
  	
  	function cityChange(code){
  		var xhr = new XMLHttpRequest();
  		//console.log('change');
  		xhr.onreadystatechange=function(){
  			if(xhr.readyState==4&&xhr.status==200){
  				eval('var towns=' + xhr.responseText);
  				//console.log(cities);
  				var list = document.getElementById("townId");
  				while(list.hasChildNodes()){
  					list.removeChild(list.firstChild);
  			    }
  				
  				for(var i=0;i<towns.length;i++){
  					/* console.log(cities[i].name); */

  					var node = document.createElement("option");
  					var text = document.createTextNode(towns[i].name);
  					node.setAttribute("value", towns[i].code);
  					node.appendChild(text);
  					list.appendChild(node);

  				}
  			}
  		};
  		var url = 'AddressServlet?' + 'type=city&code=' + code;
  		xhr.open("POST", url, true);
  		xhr.send(null);
  	}
  </script>

Ajax向后台发送请求后获取到数据库中的相关信息，然后展示在前端页面中。

Servlet代码：

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

	private AddressService addressService = new AddressServiceImpl();

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

		this.doPost(request, response);
	}

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

		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		Gson gson = new Gson();
		if (request.getParameter("type") == null) {
			request.setAttribute("provinces", showProvinces());
			request.getRequestDispatcher("menu.jsp").forward(request, response);
		}
		else if(request.getParameter("type").equals("province")){
			response.setContentType("text/json;charset=utf-8");
			if(request.getParameter("code").equals("default")) return;
			int code = Integer.parseInt(request.getParameter("code"));
			out.println(gson.toJson(showCities(code)));
			//System.out.println(showCities(code));
			out.flush();
			out.close();
		}
		else if(request.getParameter("type").equals("city")){
			response.setContentType("text/json;charset=utf-8");
			if(request.getParameter("code").equals("default")) return;
			int code = Integer.parseInt(request.getParameter("code"));
			out.println(gson.toJson(showTowns(code)));
			//System.out.println(showTowns(code));
			out.flush();
			out.close();
		}
	}

	private List<Province> showProvinces() {
		return addressService.getProvince();
	}
	
	private List<City> showCities(int code){
		return addressService.getCity(code);
	}
	
	private List<Town> showTowns(int code){
		return addressService.getTown(code);
	}
}