说明:项目中需要用到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 }
说明:项目中需要用到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 }