說明:項目中需要用到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 }
數據庫字段:
