简单的省市联动

 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 }
Dao

posted @ 2019-05-21 21:01  我差两天十八岁  阅读(268)  评论(0编辑  收藏  举报