javaweb基础----省市县三级联动(javascript版)-CSDN博客

说明:项目中需要用到json的工具包:flexjson-2.1.jar,这个工具包用于将后端数据库返回的list集合转换为字符串

  1 <script type="text/javascript">
  2             function getXHR() {
  3                 //定义一个变量，用来接收ajax核心引擎对象
  4                 var xmlhttp;
  5                 //判断当前浏览器
  6                 if(window.XMLHttpRequest) {
  7                     // code for IE7+, Firefox, Chrome, Opera, Safari
  8                     xmlhttp = new XMLHttpRequest();
  9                 } else {
 10                     // code for IE6, IE5
 11                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 12                 }
 13                 //将ajax核心引擎对象，返回给调用者
 14                 return xmlhttp;
 15             }
 16             window.onload = function() {
 17                 var xhr = getXHR();
 18                 //打开链接
 19                 xhr.open("POST", "${root }/loadProvinceServlet", true);
 20                 // 使用表单的方式 POST 数据
 21                 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 22                 //发送数据
 23                 xhr.send("pid=0");
 24                 xhr.onreadystatechange = function() {
 25                     if(xhr.readyState == 4 && xhr.status == 200) {
 26                         var data = xhr.responseText;
 27                         //解析后台返回的数据
 28                         var arr = eval('('+data+')');
 29                         //获取省份的下拉框
 30                         var province = document.getElementById("province");
 31                         //遍历数组，将数组中所有的省份信息添加到下拉框中
 32                         for (i in arr) {
 33                             var p = arr[i];
 34                             var opt = document.createElement("option");
 35                             opt.setAttribute("value",p.id);
 36                             opt.innerHTML = p.name;
 37                             province.appendChild(opt);
 38                         }
 39                     }
 40                 }
 41 
 42             }
 43             function loadCity(pid) {
 44                 // 清空市下拉框中的所有选项
 45                 // 获取省份的下拉框
 46                 var city = document.getElementById("city");
 47                 city.options.length = 1;
 48                 // 清空县下拉框中的值
 49                 var district = document.getElementById("district");
 50                 district.options.length = 1;
 51                 // 需要对选择的值进行有效验证
 52                 if (!pid) return;
 53                 
 54                 // 1. 获取XMLHttpRequest对象
 55                 var xmlhttp = getXHR();
 56                 // 2. 监听服务器返回状态
 57                 xmlhttp.onreadystatechange = function() {
 58                     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 59                         // 获取后台返回的结果
 60                         var data = xmlhttp.responseText;
 61                         // 根据结果进行相应的处理
 62                         
 63                         // 后台返回所有的省份信息，json格式："[{id:1,name:"江苏"},{id:2,name:"上海"}]"
 64                         //var arr = JSON.parse(result); // 不推荐使用！
 65                         var arr = eval('(' + data + ')');
 66                         // 遍历数组，将数组中的所有的省份添加到下拉框中
 67                         for (i in arr) {
 68                             var p = arr[i];
 69                             var opt = document.createElement("option");
 70                             // <option value="1">江苏</option>
 71                             opt.setAttribute("value", p.id);
 72                             opt.innerHTML = p.name;
 73                             // 将创建好的option对象添加到下拉框中
 74                             city.appendChild(opt);
 75                         }
 76                     }
 77                 }
 78                 // 3. 打开连接
 79                 xmlhttp.open("POST", "${root }/loadProvinceServlet", true);
 80                 // 使用表单的方式 POST 数据
 81                 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 82                 // 4. 发送请求
 83                 xmlhttp.send("pid=" + pid);
 84             }
 85             function loadDist(pid) {
 86                 // 获取县的下拉框，清空其中的值
 87                 var district = document.getElementById("district");
 88                 //district.length = 1;// 不推荐
 89                 district.options.length = 1; // 推荐！！！
 90                 
 91                 // 需要对选择的值进行有效验证
 92                 if (!pid) return;
 93                 // 1. 获取XMLHttpRequest对象
 94                 var xmlhttp = getXHR();
 95                 // 2. 监听服务器返回状态
 96                 xmlhttp.onreadystatechange = function() {
 97                     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 98                         // 获取后台返回的结果
 99                         var data = xmlhttp.responseText;
100                         // 根据结果进行相应的处理
101                         
102                         // 后台返回所有的省份信息，json格式："[{id:1,name:"江苏"},{id:2,name:"上海"}]"
103                         //var arr = JSON.parse(result); // 不推荐使用！
104                         var arr = eval('(' + data + ')');
105                         // 遍历数组，将数组中的所有的县添加到下拉框中
106                         for (i in arr) {
107                             var p = arr[i];
108                             var opt = document.createElement("option");
109                             // <option value="1">江苏</option>
110                             opt.setAttribute("value", p.id);
111                             opt.innerHTML = p.name;
112                             // 将创建好的option对象添加到下拉框中
113                             district.appendChild(opt);
114                         }
115                     }
116                 }
117                 // 3. 打开连接
118                 xmlhttp.open("POST", "${root }/loadProvinceServlet", true);
119                 // 使用表单的方式 POST 数据
120                 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
121                 // 4. 发送请求
122                 xmlhttp.send("pid=" + pid);
123             }
124 
125         </script>

后端servlet代码:

 1     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2         //1.获取请求参数,根据pid查询所有子集区域
 3         int pid = Integer.parseInt(request.getParameter("pid"));
 4         //2.调用service方法查询数据
 5         ProvinceService ps = new ProvinceServiceImpl();
 6         List<PCD> areaList = ps.load(pid);
 7         //使用flexjson解析返回集合
 8         JSONSerializer serializer =new JSONSerializer();
 9         serializer = serializer.exclude("calss","pid");//移除不需要的字段
10         String data = serializer.serialize(areaList);
11 //        serializer.deepSerialize(areaList);//可以深度解析javabean中的list map集合
12         //3.页面响应给前端展示
13         response.getWriter().write(data);
14     }
15     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
16         doGet(request, response);
17     }