jquery json ajax三级联动

浏览数：25 / 时间：2015年06月09日

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 }