1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <script type="text/javascript" src="./js/jquery-2.1.4.js"></script> 9 <title>Insert title here</title> 10 <script type="text/javascript"> 11 $(function(){ 12 alert(1); 13 $.get("<c:url value='/ProvinceServlet'/>",{"method":"getProvince"},function(data){ 14 //将字符串对象转换成JSON对象 15 data = eval("("+data+")"); 16 //遍历取出城市，并拼接到下拉列表中 17 $(data).each(function(i,data){ 18 var html ="<option value='"+data.pid+"'>"+data.name+"</option>"; 19 //将html追加到下拉列表 20 $(html).appendTo($("#province")); 21 }); 22 }); 23 24 //当省被选择后，城市栏需要使用回调函数加载 25 $("#province").change(function(){ 26 $.get("<c:url value='/ProvinceServlet'/>",{"method":"getCity","pid":$("#province").val()},function(data){ 27 alert(2); 28 //转成JSON 先删除原来城市的 再遍历 再拼标签 ，再追加 29 data = eval("("+data+")"); 30 $("#city").children(":gt(0)").remove(); 31 alert(3); 32 $(data).each(function(i,data){ 33 var html ="<option value='"+data.cid+"'>"+data.name+"</option>"; 34 $(html).appendTo($("#city")); 35 }); 36 }); 37 }); 38 }); 39 40 </script> 41 </head> 42 <body> 43 <!-- 当页面加载后，加载了省份--> 44 ${errorMsg } 45 <form > 46 省份：<select id="province"> 47 <option>请选择</option> 48 </select> 49 城市：<select id="city"> 50 <option>请选择</option> 51 </select> 52 </form> 53 </body> 54 </html>
1 import net.sf.json.JSONArray; 2 3 /** 4 * Servlet implementation class ProvinceServlet 5 */ 6 public class ProvinceServlet extends HttpServlet { 7 Dao dao = new Dao(); 8 /* 9 * 点击省，市的下拉列表异步请求，回调函数中给市下拉列表添加对应的市 10 * 1.url 2.传递的参数 3.回调函数 11 */ 12 @Override 13 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 14 req.setCharacterEncoding("utf-8"); 15 resp.setContentType("text/html;charset=utf-8"); 16 String param = req.getParameter("method"); 17 if("getProvince".equals(param)) { 18 System.out.println("是否进入判断"); 19 getProvince(req,resp); 20 } 21 if("getCity".equals(param)) { 22 getCity(req,resp); 23 } 24 } 25 26 /* 27 * 获取数据，处理数据，将数据存到json中，发送数据 28 * 用户的切换下拉菜单事件会响应一个AJAX方法，然后传递参数pid 29 */ 30 private void getCity(HttpServletRequest req, HttpServletResponse resp) throws IOException { 31 String param = req.getParameter("pid"); 32 if(param==null||"".equals(param)){ 33 req.setAttribute("errorMsg", "请先选择省份"); 34 }else { 35 int pid =Integer.parseInt(param); 36 //给他所有的市 37 List<City> cities = dao.getCitiesByPid(pid); 38 System.out.println(cities); 39 //存 40 JSONArray JSONCities = JSONArray.fromObject(cities); 41 //发送 42 resp.getWriter().write(JSONCities.toString()); 43 } 44 45 46 47 } 48 49 50 private void getProvince(HttpServletRequest req, HttpServletResponse resp) throws IOException { 51 System.out.println("getProvince"); 52 //给他所有的省 53 List<Province> provinces = dao.getProvinces(); 54 System.out.println(provinces); 55 //存 56 JSONArray JSONProvinces = JSONArray.fromObject(provinces); 57 //发送 58 resp.getWriter().write(JSONProvinces.toString()); 59 } 60 61 }
1 public class Dao { 2 @Test 3 public void test() { 4 List<Province> provinces = getProvinces(); 5 System.out.println(provinces); 6 } 7 /* 8 * 获取省 9 */ 10 public List<Province> getProvinces() { 11 List<Province> provinces = new ArrayList<>(); 12 provinces.add(new Province("四川", 1)); 13 provinces.add(new Province("北京", 2)); 14 return provinces; 15 16 } 17 /* 18 * 获取市 19 */ 20 public List<City> getCitiesByPid(int pid){ 21 List<City> cities = new ArrayList<>(); 22 if(pid==1) { 23 cities.add(new City("成都",1,1)); 24 cities.add(new City("双流",2,1)); 25 return cities; 26 } 27 else{ 28 cities.add(new City("东城",3,2)); 29 cities.add(new City("西城",4,2)); 30 return cities; 31 } 32 } 33 }
