说明:项目中需要用到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 }
数据库字段:
