province_city_area.jsp
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <script type="text/javascript" src="js/jquery-1.8.2.js"></script> 6 </head> 7 <body> 8 <select id="provinceID"> 9 <option>选择省份</option> 10 <option>湖南</option> 11 <option>广东</option> 12 <option>湖北</option> 13 </select> 14 <hr/> 15 <select id="cityID"> 16 <option>选择城市</option> 17 </select> 18 <hr/> 19 <select id="areaID"> 20 <option>选择区域</option> 21 </select> 22 <script type="text/javascript"> 23 //省份-城市 24 $("#provinceID").change(function(){ 25 //清空城市下拉框中的内容，除提示信息外 26 $("#cityID option:gt(0)").remove(); 27 $("#areaID option:gt(0)").remove(); 28 //获取选中的省份 29 var province = $("#provinceID option:selected").html(); 30 var url = "${pageContext.request.contextPath}/ProvinceCityAreaJsonServlet?time="+new Date().getTime(); 31 var sendData = {"province":province,"method":"provinceToCity"}; 32 $.post(url,sendData,function(backData,textStatus,xhr){ 33 //解析字符串 34 var jsonString = eval("("+backData+")"); 35 var size = jsonString.city.length; 36 for(var i=0;i<size;i++){ 37 //获取每一个城市 38 var city = jsonString.city[i]; 39 var $option = $("<option>" + city + "</option>") 40 $("#cityID").append( $option ); 41 } 42 }); 43 }); 44 //城市-区域 45 $("#cityID").change(function(){ 46 $("#areaID option:gt(0)").remove(); 47 var city = $("#cityID option:selected").html(); 48 var url = "${pageContext.request.contextPath}/ProvinceCityAreaJsonServlet?time="+new Date().getTime(); 49 var sendData = {"city":city,"method":"cityToArea"}; 50 $.post(url,sendData,function(backData,textStatus,xhr){ 51 var jsonString = eval("("+backData+")"); 52 var size = jsonString.area.length; 53 for(var i=0;i<size;i++){ 54 var area = jsonString.area[i]; 55 var $option = $("<option>" + area + "</option>") 56 $("#areaID").append( $option ); 57 } 58 }); 59 }); 60 </script> 61 </body> 62 </html>
ProvineCityAreaJsonServlet.java
1 package cn.itcast.web.servlet; 2 3 import java.io.IOException; 4 import javax.servlet.ServletException; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 public class ProvinceCityAreaJsonServlet extends HttpServlet { 10 public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { 11 request.setCharacterEncoding("UTF-8"); 12 String method = request.getParameter("method"); 13 if("provinceToCity".equals(method)){ 14 this.provinceToCity(request,response); 15 }else if("cityToArea".equals(method)){ 16 this.cityToArea(request,response); 17 } 18 } 19 //省份到城市 20 private void provinceToCity(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { 21 String province = request.getParameter("province"); 22 String javaString = null; 23 if("广东".equals(province)){ 24 javaString = "{city:['广州','深圳']}"; 25 }else if("湖南".equals(province)){ 26 javaString = "{city:['长沙','株洲']}"; 27 }else if("湖北".equals(province)){ 28 javaString = "{city:['武汉','黄冈']}"; 29 } 30 response.setContentType("text/html;charset=UTF-8"); 31 response.getWriter().write(javaString); 32 } 33 //城市到区域 34 private void cityToArea(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { 35 String city = request.getParameter("city"); 36 String javaString = null; 37 if("广州".equals(city)){ 38 javaString = "{area:['天河','白云']}"; 39 }else if("深圳".equals(city)){ 40 javaString = "{area:['南山','宝安']}"; 41 }else if("长沙".equals(city)){ 42 javaString = "{area:['天心','雨花']}"; 43 }else if("株洲".equals(city)){ 44 javaString = "{area:['雨湖','麓山']}"; 45 }else if("武汉".equals(city)){ 46 javaString = "{area:['汉口','武昌']}"; 47 }else if("黄冈".equals(city)){ 48 javaString = "{area:['红安','黄梅']}"; 49 } 50 response.setContentType("text/html;charset=UTF-8"); 51 response.getWriter().write(javaString); 52 } 53 }