1.需要将省市县这些地区的数据表导入到数据库内，已经添加到附件可以查看
2.这是一个成型的demo，界面非常简单 select组件即可
3.准备后台数据，这里用到了Gson(),有兴趣也可以了解一下fastJson()更快更方便的处理Json数据
4.关键代码
//设置响应编码格式 resp.setContentType(“text/html;charset=utf-8”); resp.setCharacterEncoding(“utf-8”); //设置请求编码格式 req.setCharacterEncoding(“utf-8”); //获取请求内容 String parentid=req.getParameter(“parentid”); System.out.println(“parentid=”+parentid); //处理请求 ArrayList<Area> list=new AreaDao().getAreaInfo(parentid); System.out.println(list); /** * 返回数据 * 注：此时使用了Gson() */ resp.getWriter().write(new Gson().toJson(list));
5.前台代码，使用Jquery+Ajax完成联动
<%@ page language=”java” import=”java.util.*” pageEncoding=”utf-8″%><%String path = request.getContextPath();String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;%><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html> <head> <base href=”<%=basePath%>”> <script type=”text/javascript” src=”js/jquery.js”></script> <style type=”text/css”> select{ width:300px; height:30px; } #showdiv{ width:920px; margin:auto; margin-top:200px; } body{ background-color: gray; background:url(img/background.jpg); } </style> <script type=”text/javascript”> //页面加载即可获取数据 $(document).ready(function(){ getPrevious(); }) //获取省的信息 function getPrevious(){ getData(“0″,”previous”,getCity); } //获取市的信息 function getCity(){ getData(“previous”,”city”,getTown) } //获取城镇信息 function getTown(){ getData(“city”,”town”) } function getData(pid,cid,cfunc){ var pid=(pid==”0″?”0″:$(“#”+pid).val()); var data={ parentid:pid } $.get(“data.action”,data,function(data){ //使用eval函数将响应的数据转换为可执行的js代码 eval(“var areas=”+data); //获取显示响应数据的HTML元素对象 var cdata=$(“#”+cid); //将原有数据清空 cdata.empty(); //遍历循环结果 for(var i=0;i<areas.length;i++){ cdata.append(“<option value=”+areas[i].areaid+”>”+areas[i].areaname+”</option>”); } if(cfunc){ cfunc(); } }) } </script> </head> <body> <div id=”showdiv”> <select name=”previous” id=”previous” οnchange=”getCity()”> </select> <select name=”city” id=”city” οnchange=”getTown()”> </select> <select name=”town” id=”town”> </select> </div> </body></html>
6.部署到Tomcat,效果如上，sql语句上传到资源
梦想让我与众不同，奋斗让我改变命运！
