1.需要的jar包:
c3p0-0.9.1.2.jar, commons-dbutils-1.6.jar, flexjson-2.1.jar, mysql-connector-java-5.1.38-bin.jar以及c3p0的xml文件
2.前端展示:
1 <script type="text/javascript"> 2 //页面加载完之后执行 3 $(function () { 4 //初始化省信息，向服务器索要省信息 5 $.post("province", {"pid":"0"}, function(data) { 6 //遍历每条数据 7 $(data).each(function() { 8 var name = this.name; 9 var id = this.id; 10 //封装option 11 var $option = $("<option value='"+id+"'>"+name+"</option>") 12 //将option封装到s1中 13 $("#s1").append($option); 14 }) 15 }) 16 //当省份域发生变化时触发 17 $("#s1").change(function() { 18 //清空市域 19 $("#s2").empty(); 20 $("#s2").append($("<option value=''>----请选择市----</option>")) 21 //清空县域 22 $("#s3").empty(); 23 $("#s3").append($("<option value=''>----请选择区县----</option>")) 24 //获取已选省的value 25 var $s1_id = $(this).val(); 26 //向后台发送请求 27 $.post("province", {'pid':$s1_id}, function(data) { 28 //遍历每条数据 29 $(data).each(function() { 30 var name = this.name; 31 var id = this.id; 32 //封装option 33 var $option = $("<option value='"+id+"'>"+name+"</option>") 34 //将option封装到s1中 35 $("#s2").append($option); 36 }) 37 }) 38 }) 39 //当市域发生变化时触发 40 $("#s2").change(function() { 41 //清空县域 42 $("#s3").empty(); 43 $("#s3").append($("<option value=''>----请选择区县----</option>")) 44 //获取已选省的value 45 var $s2_id = $(this).val(); 46 //向后台发送请求 47 $.post("province", {'pid':$s2_id}, function(data) { 48 //遍历每条数据 49 $(data).each(function() { 50 var name = this.name; 51 var id = this.id; 52 //封装option 53 var $option = $("<option value='"+id+"'>"+name+"</option>") 54 //将option封装到s1中 55 $("#s3").append($option); 56 }) 57 }) 58 }) 59 }) 60 </script> 61 </head> 62 <body> 63 <select id="s1"> 64 <option value="">----请选择省----</option> 65 </select> 66 <select id="s2"> 67 <option value="">----请选择市----</option> 68 </select> 69 <select id="s3"> 70 <option value="">----请选择区县----</option> 71 </select> 72 73 </body>
3.后台代码
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) 2 throws ServletException, IOException { 3 request.setCharacterEncoding("UTF-8"); 4 response.setCharacterEncoding("UTF-8"); 5 response.setContentType("text/html; charset=UTF-8"); 6 int pid = Integer.parseInt(request.getParameter("pid")); 7 // int pid = 0; 8 // 调用service方法查询数据库 9 ProvinceService ps = new ProvinceServiceImpl(); 10 List<Info> infoList = ps.select(pid); 11 // 处理数据 12 JSONSerializer serializer = new JSONSerializer(); 13 serializer = serializer.exclude("class", "pid");// 移除不需要的字段 14 String data = serializer.serialize(infoList); 15 // System.out.println(data); 16 // 设置响应格式 17 response.setContentType("application/json;charset=utf-8"); 18 // 将数据返回给浏览器 19 response.getWriter().write(data); 20 }