首页 > 代码库 > jquery json ajax三级联动

jquery json ajax三级联动

2024-07-09 18:57:21   226人阅读

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 }

 


联系
我们